Diskuze: Zarovnávání

HTML a CSS HTML a CSS Zarovnávání American English version English version

Avatar
oggymotslp
Člen
Avatar
oggymotslp:

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. dubna 17:11
Proč to dělat jednoduše, když to jde i složitě :D
Avatar
Tomáš123
Člen
Avatar
Odpovídá na oggymotslp
Tomáš123:

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. dubna 17:18
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
oggymotslp
Člen
Avatar
Odpovídá na Tomáš123
oggymotslp:

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. dubna 17:20
Proč to dělat jednoduše, když to jde i složitě :D
Avatar
Tomáš123
Člen
Avatar
Odpovídá na oggymotslp
Tomáš123:

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í
+1 bodů
Řešení problému
Nahoru Odpovědět 1. dubna 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.