Горизонтальное центрирование / равномерное распределение <li>внутри <ul>внутри <div> - PullRequest
Новая
       14

Горизонтальное центрирование / равномерное распределение <li>внутри <ul>внутри <div>

27 голосов
/ 16 июля 2010

Иметь Navbar <div>, внутри <ul>, и каждый <li> содержит <a> со ссылкой (это для панели навигации)

Я посмотрел на Google и этот сайт, и я не смог найти именно то, что искал.

Я хочу сохранить свой текущий стиль (используя <li> с <a> внутри), и я хочу, чтобы <li> был равномерно распределен и центрирован (эта часть естественна, если они равномерно распределен ...) внутри <ul> (который находится внутри панели навигации <div>).

В любом случае, если это не имеет смысла, дайте мне знать, в настоящее время они просто выровнены по левому краю ... Вот что у меня есть:

HTML: 

<div class="navbar">
  <ul>
    <li><a href="Home">Home</a></li>
    <li><a href="Discounts">Discounts</a></li>
    <li><a href="Contact">Contact Us</a></li>
    <li><a href="About">About Us</a></li>
  </ul>
</div>

CSS: 

.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0px;
    padding: 0px;
    width: 90%;
    overflow: hidden;
}
.navbar li{
    float: left;
    padding: 2px;
    width: 150px;
    margin-left: auto ;
    margin-right: auto ;
}

Я также могу включить свой .navbar a {}, если это необходимо. Я очень новичок в CSS, так что будь проще, также я сначала осмотрел SO и Google и не смог найти ничего похожего на это (хотя, возможно, поскольку я новичок, я не понимаю, что это то же самое).

Если это неправильный метод CSS и / или существует гораздо более простой и часто используемый способ сделать это. Идите дальше, и вместо этого сделайте ссылку / пост, но я бы предпочел этот путь, так как он наиболее важен для меня.

Спасибо

Ответы [ 8 ]

22 голосов
/ 16 июля 2010

Это позволяет центрировать динамику без ширины ul, если не требуется указывать ширину 90%: 

<!doctype html>
<div class="navbar">
    <div id="for-ie">
        <ul>
            <li><a href="Home">Home</a></li>
            <li><a href="Discounts">Discounts</a></li>
            <li><a href="Contact">Contact Us</a></li>
            <li><a href="About">About Us</a></li>
        </ul>
    </div>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    border:1px solid red;
    display:table;
    overflow: hidden;
}
.navbar li{
    float: left;
    padding: 2px;
    width: 150px;
    margin-left: auto ;
    margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
    #for-ie { text-align:center; }
    #for-ie ul { display:inline-block; }
    #for-ie ul { display:inline; }
</style>
<![endif]-->

Протестировано в IE6, FX 3.

РЕДАКТИРОВАТЬ: Альтернативный стиль без постороннего элемента: 

<!doctype html>
<div class="navbar">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="Discounts">Discounts</a></li>
        <li><a href="Contact">Contact Us</a></li>
        <li><a href="About">About Us</a></li>
    </ul>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    padding: 0px;
    zoom:1;
    border:1px solid red;
    overflow: hidden;
}
.navbar li{
    padding: 2px;
    width: 150px;
    display:inline-block;
}
</style>
<!--[if IE]>
<style>
    .navbar li { display:inline; }
</style>
<![endif]-->
9 голосов
/ 06 марта 2013

Вы можете использовать text-align: исправлено, чтобы сделать это всего за несколько строк CSS, без дополнительной разметки.

Смотрите мой ответ здесь: https://stackoverflow.com/a/15232761/87520

<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
</ul>

<style>
.navbar > ul {text-align:justify;}
.navbar > ul > li {display:inline-block}
.navbar > ul:after { content:' '; display:inline-block; width: 100%; height: 0 } 
</style>
5 голосов
/ 11 мая 2016

В наши дни правильным способом является использование Flexbox: 

.navbar ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap; /* assumes you only want one row */
}
2 голосов
/ 16 июля 2010

В основном сводится к добавлению text-align: center к ul и display: inline-block к li.

Похоже, уловка: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<style type="text/css">
.navbar {
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.navbar li{
    display: inline-block;
    padding: 2px;
    width: 150px;
}
</style>
</head>
<body>
<div class="navbar">
  <ul>
    <li><a href="Home">Home</a></li>
    <li><a href="Discounts">Discounts</a></li>
    <li><a href="Contact">Contact Us</a></li>
    <li><a href="About">About Us</a></li>
  </ul>
</div>
</body>
</html>
0 голосов
/ 27 ноября 2015

Вы можете использовать «display: table» и «display: table-cell», код более чистый, а ширина li не жестко задана: 

<div class="navbar">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="Discounts">Discounts</a></li>
        <li><a href="Contact">Contact Us</a></li>
        <li><a href="About">About Us</a></li>
    </ul>
</div>

.navbar {
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none;
    padding: 0px;
    display: table;
    table-layout: fixed;
    width: 100%;
}
.navbar li{
    padding: 2px;
    display:table-cell;
    width: 50px; /* just for the browser to get idea that all cells are equal */
    text-align: center;
    border: 1px solid #FF0000;
}

http://jsfiddle.net/dchwv6qn/1/

0 голосов
/ 03 декабря 2014

Ну, я попробовал все, ничего не работает, поэтому, если у вас есть такая же проблема, то я бы порекомендовал вам использовать таблицы и тд для их выравнивания, все еще работает правильно.

0 голосов
/ 16 июля 2010

вам нужно определить фиксированное значение для вашего контейнера.

, например: 

.navbar {
width: 1000px; /* */
margin: 0 auto;
background-color: #ABCDEF; }

, если вы хотите сохранить свой bg цвет .navbar, придерживайтесь 100%, удалитеплавающий слева от li и стиль как это -> 

.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    width: 800px;
    overflow: hidden;
}
.navbar li{
    display: inline-block;
    padding: 2px;
    width: 150px;
    marign: 0 auto;
}
0 голосов
/ 16 июля 2010

Вы ищете что-то вроде этого:? 

.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
.navbar li{
    display:inline;
    line-height:30px;
}
.navbar li a { padding:.4em 5em;}


<div class="navbar">
  <ul>
    <li><a href="Home">Home</a></li>
    <li><a href="Discounts">Discounts</a></li>
    <li><a href="Contact">Contact Us</a></li>
    <li><a href="About">About Us</a></li>
  </ul>
</div>
...