NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: odstranenie whitespace pri inline-block v haml

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

Aktivity
Avatar
mmartinssedlacek
Člen
Avatar
mmartinssedlacek:23.10.2014 19:10

Zdar,
už pár hodín googlim ale neviem si rady tak sa musím obrátiť na vás. Môj problém je nasledujúci: Mám menu ktoré zarovnávam horizontálne pomocou

display: inline block

. Samozrejme mi v HTML vzniknú whitespaces, ale pomocou komentára to nemôžem vyriešiť keďže sa mi hodí na nový riadok. Pre úplnosť:
HAML

%nav
    %ul
     %li
      %a(href="#") menu0
     %li
      %a(href="#") menu1
     %li
      %a(href="#") menu2
     %li
      %a(href="#") menu3
     %li
      %a(href="#") menu4

SASS:

nav
  ul
   list-style: none
   a
    text-decoration: none
    color: #000
   li
    display: inline-block
    width: $menu-polozka-width
    text-align: center
    height: 50px
    line-height: 50px
    &:hover
     background-color: #939313

Keďže to mám v containeri s width 100% a li má width 20%, posledný list item mi skočí na nový riadok. Zatiaľ som došiel na jediné riešenie nedávať li width na 20% ale 19%, ale to mi nepríde ako nejaké dobré reišenie.

 
Odpovědět
23.10.2014 19:10
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na mmartinssedlacek
Neaktivní uživatel:23.10.2014 19:23

dal bych tam něco jako position: relative; left: -2px; (když nebude fungovat tak zkus místo left dát margin-left)

Nahoru Odpovědět
23.10.2014 19:23
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na mmartinssedlacek
Neaktivní uživatel:23.10.2014 19:39

Dělají to ty mezery mezi tagy, tak by ses jich mohl zbavit...

ul {
  font-size: 0;
}
ul li {
  font-size: 16px;
}
Akceptované řešení
+20 Zkušeností
Řešení problému
Nahoru Odpovědět
23.10.2014 19:39
Neaktivní uživatelský účet
Avatar
mmartinssedlacek
Člen
Avatar
mmartinssedlacek:24.10.2014 5:43

funguje, diky moc.
este sa chcem spytat, funguje to iba ked zadam font-size v px. ked ich zadam v em, nezobrazi sa mi v odkazoch vobec text, nevieme cim to moze byt ?

Editováno 24.10.2014 5:43
 
Nahoru Odpovědět
24.10.2014 5:43
Avatar
mmartinssedlacek
Člen
Avatar
mmartinssedlacek:24.10.2014 6:04

Našiel som ešte iný spôsob:

%nav
     %ul
      %li>
       %a(href="#") menu0
      %li>
       %a(href="#") menu1
      %li>
       %a(href="#") menu2
      %li>
       %a(href="#") menu3
      %li>
       %a(href="#") menu4

generuje

<nav>
        <ul><li>
            <a href='#'>menu1</a>
          </li><li>
            <a href='#'>menu2</a>
          </li><li>
            <a href='#'>menu3</a>
          </li><li>
            <a href='#'>menu4</a>
          </li><li>
            <a href='#'>menu5</a>
          </li></ul>
      </nav>
 
Nahoru Odpovědět
24.10.2014 6:04
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 5 zpráv z 5.