使< li>适合< ul>的宽度。使用CSS [英] Make <li> fit the width of the <ul> using CSS

问题描述

我想让< li> 符合< ul> 的宽度，即使使用 width：auto 它根本不工作，我不知道为什么。我试图使用 display：inline-block 但是这是相同的。我不知道有多少个标签，所以这就是为什么我不直接使用百分比。

I'm trying to make the <li> fit the width of the <ul> but even with width:auto it doesn't work at all, and I don't know why. I tried to use display:inline-block but this is the same. I don't know how many tabs I will have so this is why I am not using a percentage directly.

我想显示列表内联当我显示页面，并在智能手机上显示一个 li （通过媒体查询）。

I would like to display the list inline when I display the page on a desktop and display one li per line when I am on a smartphone (with media queries).

我有这个：

<ul id='menu'>
    <li class="button"><a class='current' href='http://'>Home</a></li>
    <li class="button"><a href='http://'>Products</a></li>
    <li class="button"><a href='http://'>Support</a></li>
    <li class="button"><a href='http://'>Contact</a></li>
    <li class="button"><a href='http://'>Contact</a></li>
</ul>

我的CSS看起来像这样：

and my CSS looks like this:

ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
/*border-bottom:1px solid #000000;
border-top:1px solid #000000;*/
}

li.button {
background:transparent url(../images/nav_bg.png) repeat-x top left;
height:30px;
width:auto;
}



ul#menu li
{
display:inline-block;
margin:0;
padding:0;
width:auto;
}

ul#menu li a
{
display:inline-block;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
width:auto;
}

ul#menu li a:hover
{   
color:#FFFFFF;
height:22px;
background:transparent url(../images/nav_bg.png) 0px -30px no-repeat;       
}


ul#menu li a.current
{
display:inline-block;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;  
margin:0;
}

推荐答案

处理单行全宽ul，其中未定义数量的li元素需要均匀地间隔开：

I've found this way to deal with single-line full-width ul where an undefined number of li elements need to be spaced out evenly:

ul {
  width: 100%;
  display: table;
  table-layout: fixed; /* optional */
}

ul li {
  display: table-cell;
  width: auto;
  text-align: center;
}

基本上，它模拟一个表。在Gecko，Webkit，IE8 +工作。
对于IE7和向下，你应该使用一些inline-block hackery：）

Basically, it emulates a table. Works in Gecko, Webkit, IE8+. For IE7 and downwards you should use some inline-block hackery :)

JSFiddle

这篇关于使< li>适合< ul>的宽度。使用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！