水平菜單中心元素

HTML文件

<nav> 
    <ul> 
     <li><b><a href="">Alle Rezepte</a></b></li> 
     <li><b><a href="">Alle Zutaten</a></b></li> 
    </ul> 
</nav>

css文件

nav { 
} 

nav ul { 
    text-align: center; 
} 

nav ul li { 
    display: inline; 
}

它看起來像這樣在瀏覽器中 enter image description here

但我想這兩個元素，兩個人在自己的半場中心，像，而不是這個

|----------li1-----------|---------li2------------|

|---------------------li1|li2---------------------|

我有什麼要添加到我的代碼有它我的方式想要它？

來源

2015-05-07 danielr1996

寬度增加華里。 – harry

nav ul li {float：left;寬度：50％; text-align：center; list-style：none;} –

請嘗試我的更新版本，因爲所有其他人只能使用2個元素。 –

嘗試這樣的：更新Demo

nav { 
    margin:0 auto; 
    text-align: center; 
    width:100%; 
    background-color:#ccc; 
    border:1px solid #666; 
} 
nav ul { 
    margin:0 auto; 
} 
nav ul li { 
    display:inline-block; 
    padding:10px 15px; 
    list-style-type:none; 
    background-color:#ccc; 
    border-right:1px solid #666; 
    text-align: center; 
} 
nav ul li a { 
    font-weight:bold; 
    display:block; 
    text-align: center; 
}

來源

2015-05-07 12:05:23

這個版本完美的作品，很多項目以及非常長的項目，非常感謝 – danielr1996

歡迎:) –

使用float和text-align：

li {float: left; width: 50%; text-align: center; list-style: none;} 
li a {display: block;}

http://jsfiddle.net/5gLkdaw5/

來源

2015-05-07 12:06:51 panther

如果我們在列表中添加第三個元素，該怎麼辦？ –

@AshotKhanamiryan我也會感興趣，因爲後來我想添加更多的元素而不重寫css。 – danielr1996

@ danielr1996：將50％改成（'100％/項目數量）。 – panther

見jsFiddle

您可以使用display:table;

nav ul { 
    text-align: center; 
    display:table; 
    table-layout:fixed; 
    width:100%; 
} 

nav ul li { 
    display: table-cell; 
}

來源

2015-05-07 12:08:37

試試這個： http://jsfiddle.net/GCu2D/691/

CSS：

nav ul { 
    text-align: center; 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    white-space:nowrap; 
} 
nav ul li { 
    float:left; 
    width:50%; 
}

來源

2015-05-07 12:10:09

給李的寬度。

看到這一切在這裏http://codepen.io/mike-grifin/pen/bdVZJP

CSS：

nav ul { 
top: 0; 
left: 0; 
} 

nav ul li { 
} 

.example { 
background-color: green; 
display: inline-block; 
padding: 20px; 
margin: 0; 
width: 46%; 
text-align: center; 
}

HTML：

<nav> 
<ul> 
    <li class="example"><b><a href="">Alle Rezepte</a></b></li> 
    <li class="example"><b><a href="">Alle Zutaten</a></b></li> 
</ul> 
</nav>

來源

2015-05-07 12:14:54 ironmike

水平菜單中心元素

回答

相關問題