• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Prawidłowe ułożenie przycisku

Object Storage Arubacloud
0 głosów
240 wizyt
pytanie zadane 26 lutego 2018 w HTML i CSS przez ShadoWs Bywalec (2,800 p.)

Witam mam problem z przyciskiem ,,powrót" https://codepen.io/KingShadow/pen/OQBGPb Nie wiem jak go prawidłowo ustawić. Aktualnie jest tak że przesuwa tagi w prawo a chciałbym żeby tagi były na środku a przycisk nad nimi z lewej strony. Z góry dzięki za pomoc ;D

2 odpowiedzi

+2 głosów
odpowiedź 26 lutego 2018 przez gremlin Dyskutant (7,600 p.)

Dopisz w .box

display: flex;
align-items: center;
flex-direction: column;

a w .button dopisz:

align-self: flex-start;

 

komentarz 26 lutego 2018 przez ShadoWs Bywalec (2,800 p.)
O dzięki wielkie. Tyle się męczyłem
komentarz 26 lutego 2018 przez gremlin Dyskutant (7,600 p.)
komentarz 26 lutego 2018 przez ShadoWs Bywalec (2,800 p.)
Dzięki za link na pewno zajrzę :)
0 głosów
odpowiedź 26 lutego 2018 przez dervil Gaduła (3,030 p.)

moim zdaniem rozwiązanie z flexem nie jest za dobre, wystarczyło zrobić tak

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    font-family: 'Exo 2', sans-serif;
    background-color: #F6F6F6
}

.box {
    margin-top: 10px;
    background: white;
    padding: 20px;
    width: 70%;
    margin: auto;
    margin-top: 80px;
}

.tags {
    margin-top: 20px;
	margin-bottom: 20px;
	text-align:center;
}

.tags a {
    border: 2px solid #ecf0f1;
    padding: 7px;
    text-transform: uppercase;
    font-size: 12px;
    color: #95a5a6;
    text-decoration: none;
}

.tags a:hover {
    border: 2px solid #e67e22;
    color: #e67e22;
}
.button {
    border: 2px solid #e67e22;
    color: #e67e22;
    padding: 7px;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    background-color: Transparent;
}

.button:hover {
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    cursor: pointer;
    background-color: #e67e22;
    color: #ecf0f1;
}

 

Podobne pytania

0 głosów
2 odpowiedzi 208 wizyt
0 głosów
1 odpowiedź 148 wizyt
pytanie zadane 12 kwietnia 2018 w HTML i CSS przez Grzegorz Mikina Dyskutant (8,060 p.)
0 głosów
2 odpowiedzi 325 wizyt
pytanie zadane 13 stycznia 2018 w C# przez Bartek997 Nowicjusz (140 p.)

92,755 zapytań

141,677 odpowiedzi

320,423 komentarzy

62,101 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...