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

Имейте 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 и/или есть гораздо более простой, более распространенный способ сделать это. Идите дальше и свяжите/опубликуйте это, но я предпочел бы это, потому что это имеет для меня большую ценность.

Спасибо

Ответы

Ответ 1

Это позволяет динамически без ширины 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.

EDIT: альтернативный стиль без постороннего элемента:

<!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]-->

Ответ 2

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

См. мой ответ здесь: fooobar.com/questions/94098/...

<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>

Ответ 3

В основном сбрасывается, чтобы добавить 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>

Ответ 4

Правильный способ сделать это в наши дни - просто использовать 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 */
}

Ответ 5

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

.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>

Ответ 6

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

например:

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

если вы хотите сохранить свой цвет bg.navbar, придерживайтесь 100%, удалите float слева от 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;
}

Ответ 7

вы можете использовать "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/

Ответ 8

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