Diskuze: odstranenie whitespace pri inline-block v haml

HTML a CSS HTML a CSS odstranenie whitespace pri inline-block v haml American English version English version

Avatar
mmartinssedlacek:

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
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na mmartinssedlacek
Daniel Vítek:

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
Avatar
Fredep
Redaktor
Avatar
Odpovídá na mmartinssedlacek
Fredep:

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
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
mmartinssedlacek:

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:

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.