Diskuze: Zarovnávání

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

oggymotslp

Člen

oggymotslp:1.4.2016 17:11

Ahoj,

chtěl bych se zeptat, jak mám udělat to, aby když mám menu nalevo a chci tam něco přidat doprava, nějaký text, tak to prostě nejde a dává se to pod to...

CSS:

@import url(https://fonts.googleapis.com/css?family=Raleway:400,200);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 220px;
  font-family: Raleway, sans-serif;
  color: #ffffff;
}
#cssmenu ul ul {
  display: none;
}
#cssmenu > ul > li.active > ul {
  display: block;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  background: #3ab4a6;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
  color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
  position: absolute;
  right: 26px;
  top: 19px;
  z-index: 5;
  display: block;
  height: 10px;
  width: 2px;
  background: #ffffff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
  position: absolute;
  right: 22px;
  top: 23px;
  display: block;
  width: 10px;
  height: 2px;
  background: #ffffff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#cssmenu ul ul li a {
  padding: 14px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  text-decoration: none;
  color: #ddd;
  background: #49505a;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul ul li a {
  padding-left: 32px;
}
#cssmenu ul ul li a:hover {
  color: #fff;
}
#cssmenu ul ul > li.has-sub > a:after {
  top: 16px;
  right: 26px;
  background: #ddd;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 20px;
  background: #ddd;
}

HTML Menu:

<div id="cssmenu" class="align-left">
  <ul>
     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Hlavní</a></li>
     <li><a href="#"><i class="fa fa-fw fa-user"></i> Profil</a></li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bomb"></i> Akce</a>
        <ul>
           <li><a href="#">Mise</a></li>
           <li><a href="#">Pochůzka</a></li>
           <li><a href="#">Útok na zločince</a></li>
        </ul>
     </li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-shopping-basket"></i> Obchody</a>
        <ul>
           <li><a href="#">Policejní oblékárna</a></li>
           <li><a href="#">Zbrojař Jim</a></li>
           <li><a href="#">Vychytávky pana Owena</a></li>
        </ul>
     </li>
     <li><a href="#"><i class="fa fa-fw fa-group"></i> Oddělení</a></li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bar-chart-o"></i> Statistiky</a>
        <ul>
           <li><a href="#">Nejlepší policista</a></li>
           <li><a href="#">Nejlepší hráč</a></li>
           <li><a href="#">Nejlepší oddělení</a></li>
        </ul>
     </li>
     <li><a href="#"><i class="fa fa-fw fa-star"></i> Speciály</a></li>
     <li><a href="#"><i class="fa fa-fw fa-cogs"></i> Nastavení účtu</a></li>
     <li><a href="#"><i class="fa fa-fw fa-external-link"></i> Odhlásit</a></li>
  </ul>
</div>

A pak k tomu mám java script, ale ten si nemyslím, že by měl být důležitý.

Předem děkuji za odpovědi

Odpovědět

1.4.2016 17:11

Proč to dělat jednoduše, když to jde i složitě :D

Tomáš123

Člen

Tomáš123:1.4.2016 17:18

Ak chceš, iba zarovnať text, použi napríklad <span> a nastav mu text-align: right. Bloky okolo seba zalamujú riadok, takže bez obtekania alebo poziciovania (vlastnosti position a margin) nejde prvky dostať vedľa seba.

Nahoru Odpovědět

1.4.2016 17:18

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

oggymotslp

Člen

oggymotslp:1.4.2016 17:20

vlastnosti position a margin

Jak bych toho mohl dosáhnout ? Nějaký krátký příklad, prosím. Já jsem na toto zarovnávání úplně levej.

Ale jinak díky

Nahoru Odpovědět

1.4.2016 17:20

Proč to dělat jednoduše, když to jde i složitě :D

Tomáš123

Člen

Tomáš123:1.4.2016 17:41

Takto to nechceš. Pri dlhšom slove sa to bude prekrývať. Bol to súhrn možností, ale najvhodnejší bude ten doprava zarovnaný span (alebo iný riadkový prvok – pokojne aj odkaz s iným cieľom adresy).

Ak to už musia byť bloky, tak použiť obtekanie: http://jecas.cz/float a nezabudni za obtekaným prvkom clearovať:

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

1.4.2016 17:41

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.

Nejčastěji vyhledáváné

Diskuze: Zarovnávání