Spacja między elementami listy Inline-Block [duplikat]

To pytanie ma już odpowiedź tutaj:

Możliwy duplikat:
niechciany margines w elementach listy bloków inline
Jak usunąć "niewidzialną przestrzeń" z HTML

Dlaczego elementy listy inline-block mają miejsce w nich? Bez względu na to, jak robię pozycje listy w menu, zawsze dostaję spacje.

li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}
ul {
  padding: 0;
}
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
 161
htmlxhtmlcss
Author: Tyler Crompton, 2011-03-10
Source

8 answers

Widziałem to I odpowiedziałem na to wcześniej:

Po dalszych badaniach mam odkrył, że inline-block jest metoda zależna od spacji i zależy od ustawienia czcionki. W tym przypadku renderowane jest 4px.

Aby tego uniknąć można uruchomić wszystkie swoje liS razem w jednej linii lub bloku tagi end I begin razem tak: 

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

Przykład tutaj .

Jak wspomniano w innych odpowiedziach i komentarzach, najlepsze praktyka rozwiązywania tego problemu polega na dodaniu font-size: 0; do elementu nadrzędnego: 

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

Jest to lepsze dla czytelności HTML (unikanie uruchamiania tagów razem itp.). Efekt odstępów jest spowodowany ustawieniem odstępów czcionek, więc należy go zresetować dla elementów inlined i ponownie ustawić dla zawartości wewnątrz.

 239
Author: Kyle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-01 09:36:41

Rozwiązanie: 

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

Musisz ustawić rozmiar czcionki rodzica na 0

 167
Author: David Horák,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-19 17:53:10

Dodałbym właściwość CSS float left, jak widać poniżej. To pozbędzie się dodatkowej przestrzeni.

ul li {
    float:left;
}
 18
Author: Trevor G,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-19 17:53:41

W rzeczywistości nie jest to specyficzne dla display:inline-block, ale dotyczy również display:inline. Tak więc, oprócz rozwiązania Davida Horáka, działa to również: 

ul {
    font-size: 0;
}
ul li {
    font-size: 14px;
    display: inline;
}
 17
Author: Gerbus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-16 14:17:47

Inne rozwiązanie, podobne do Rozwiązania Gerbusa , ale działa również z względnym rozmiarem czcionki.

ul {
    letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
    display: inline;
    letter-spacing: normal; /* Reset letter-spacing to normal value */
}
 5
Author: Leo Pitt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:09

Miałem ten sam problem, kiedy użyłem inline-block w moim menu miałem spację między każdym " li " znalazłem proste rozwiązanie, nie pamiętam gdzie go znalazłem, w każdym razie oto co zrobiłem.

<li><a href="index.html" title="home" class="active">Home</a></li><!---->
<li><a href="news.html" title="news">News</a></li><!---->
<li><a href="about.html" title="about">About Us</a></li><!---->
<li><a href="contact.html" title="contact">Contact Us</a></li>

Dodajesz znak komentarza między każdym końcem i początkiem: "li" Wtedy przestrzeń pozioma zniknie. Mam nadzieję, że odpowiedź na pytanie Dzięki

 3
Author: Fabien,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-01 04:53:48

Po prostu usuń przerwy między li w kodzie html... niech li będzie tylko w jednej linii..

 2
Author: Mya,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-11 09:40:28

Nawet jeśli nie opiera się na inline-block, Rozwiązanie to może być warte rozważenia (pozwala na prawie taką samą kontrolę formatowania z wyższych poziomów).

ul {
  display: table;
}
ul li {
  display: table-cell;
}
 0
Author: Frosty Z,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-23 10:55:32