Jak uzasadnić listę poziomą?

Mam poziomy navbar jak poniżej: 

<ul id = "Navigation">
    <li><a href = "About.html">About</a></li>
    <li><a href = "Contact.html">Contact</a></li>
    <!-- ... -->
</ul>

Używam CSS do usuwania punktorów i ustawiania ich w poziomie.

#Navigation li
{
    list-style-type: none;
    display: inline;
}

Staram się uzasadnić tekst, aby każdy link był równomiernie rozłożony, aby wypełnić całą przestrzeń ul. Próbowałem dodać text: justify do selektorów li I ul, ale nadal są wyrównane do lewej.

#Navigation
{
    text-align: justify;
}

#Navigation li
{
    list-style-type: none;
    display: inline;
    text-align: justify;
}

To dziwne, ponieważ jeśli używam text-align: right, zachowuje się zgodnie z oczekiwaniami.

Jak rozłożyć linki równomiernie?

Author: Maxpm, 2011-07-30
Source

9 answers

Nowoczesne podejście- CSS3 Flexboxes

Teraz, gdy mamy CSS3 flexboxes , nie musisz już uciekać się do sztuczek i obejść, aby to zadziałało. Na szczęście obsługa przeglądarki przeszła długą drogę i większość z nas może zacząć korzystać z flexboxów.

Wystarczy ustawić element nadrzędny display na flex, a następnie zmienić justify-content własność do albo space-between lub space-around w celu dodania przestrzeni pomiędzy / wokół artykuły dziecięce flexbox. Następnie dodaj dodatkowe prefiksy dostawcy dla Więcej obsługi przeglądarki.

Za Pomocą justify-content: space-between - (przykład tutaj):

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-between;
}
<ul class="menu">
    <li>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</li>
</ul>

Za Pomocą justify-content: space-around - (przykład tutaj):

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-around;
}
<ul class="menu">
    <li>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</li>
</ul>
 28
Author: Josh Crozier,
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
2015-03-26 01:15:33

Musisz użyć "sztuczki", aby to zadziałało.

Zobacz też: http://jsfiddle.net/2kRJv/

HTML: 

<ul id="Navigation">
    <li><a href="About.html">About</a></li>
    <li><a href="Contact.html">Contact</a></li>
    <!-- ... -->
    <li class="stretch"></li>
</ul>

CSS: 

#Navigation
{
    list-style-type: none;
    text-align: justify;
    height: 21px;
    background: #ccc
}

#Navigation li
{
    display: inline
}
#Navigation .stretch {
    display: inline-block;
    width: 100%;

    /* if you need IE6/7 support */
    *display: inline;
    zoom: 1
}

Szczegóły dotyczące IE6/7: Inline block nie działa w internet Explorerze 7, 6

 34
Author: thirtydot,
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 12:26:12

Można to również osiągnąć za pomocą pseudo elementu na elemencie ul: 

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: justify;
}

ul:after {
    content: "";
    width: 100%;
    display: inline-block;
}

li {
    display: inline;
}
 24
Author: Ben Foster,
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-07-02 14:19:33

To może odpowiadać Twoim potrzebom: 

#Navigation{
}
#Navigation li{
    list-style-type: none;
    text-align: center;
    float: left;
    width: 50%; /*if 2 <li> elements, 25% if 4...*/
}

Demo : http://jsfiddle.net/KmqzQ/

 4
Author: Sparkup,
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
2011-07-29 22:36:32

Po prostu zrób: 

ul { width:100%; }
ul li {
  display:table-cell;
  width:1%;
}
 4
Author: jakosik,
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
2015-02-16 16:45:21

HTML 

<ul id="Navigation">
    <li><a href="#">The Missing Link</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Riluri</a></li>
    <li><a href="#">Contact us</a></li>
    <!-- ... -->
    <li class="stretch"></li>
</ul>

CSS 

#Navigation {
    list-style-type: none;
    text-align: justify;
    height: 21px;
    background: #ccc
}

#Navigation li{
    display: inline
}

#Navigation li a {
    text-align: left;
    display:inline-block;
}

#Navigation .stretch {
    display: inline-block;
    width: 100%;

    /* if you need IE6/7 support */
    *display: inline;
    zoom: 1
}

Zobacz demo: http://jsfiddle.net/2kRJv/392/

 3
Author: Mark,
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-02-01 15:44:55

Musisz mieć oddzielone elementy

  • , w przeciwnym razie justify nie będzie działać. 
    For example, this:

<ul><li>test</li><li>test</li></ul>


needs to be like this:
<ul>
<li>test</li>
<li>test</li>
</ul>

    Lub przynajmniej mają spacje między otwierającymi i zamykającymi znacznikami

  • .
    •  1
    Author: Adrian Cumpanasu,
    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-04-16 15:50:18

    Ten blog mA satysfakcjonująco solidne rozwiązanie. Wymaga jednak pewnych drobnych zmian, aby pomieścić ul/li nawigację: 

    #Navigation {
    width: 100%;
    padding: 0;
    text-align: justify;
    font-size: 0;
    font-size: 12px\9; /* IE 6-9 */
}
#Navigation>li {
    font-size: 12px;
    text-align: center;
    display: inline-block;
    zoom: 1;
    *display: inline; /* IE only */
}
#Navigation:after {
    content:"";
    width: 100%;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

    Http://jsfiddle.net/mblase75/9vNBs/

     0
    Author: Blazemonger,
    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-06 15:04:49

    Zaznaczona odpowiedź nie działa, jeśli jest w niej Biała spacja.

    Top odpowiedź tutaj działa z białymi spacjami Jak * naprawdę * uzasadnić poziome menu w HTML+CSS?

     0
    Author: Art S,
    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 12:02:22