使用CSS使适合的宽度

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.

我试着让

适合

的宽度，但即使有宽度:auto它根本就不能工作，我也不知道为什么。我尝试使用display:inline-block，但是这是一样的。我不知道我将有多少标签，所以这就是为什么我不直接使用百分比。

适合的宽度,但即使有宽度:汽车它根本就不能工作,我也不知道为什么。我尝试使用显示:inline-block,但是这是一样的。我不知道我将有多少标签,所以这就是为什么我不直接使用百分比。

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

当我在台式机上显示页面时，我希望显示列表内的列表，在智能手机上显示一个li / line(有媒体查询)。

I have this:

我有这个:

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

and my CSS looks like this:

我的CSS是这样的:

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

5 个解决方案

#1

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，其中未定义的li元素数量需要均匀分布:

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

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

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

基本上，它模拟一个表。在Gecko, Webkit, IE8+工作。对于IE7和IE7，你应该使用一些内行代码块:

JSFiddle

JSFiddle

#2

Since the li count can change, I can only think of accomplishing this with javascript/jquery as you suggested. Just divide 100 by the # of li's and set the width on each one.

由于li计数可以更改，所以我只能考虑使用javascript/jquery来实现这一点。只需将100除以li的#，然后在每一个上设置宽度。

var width = Math.floor(100 / $("ul#menu li").size());
$("ul#menu li").css('width', width + "%");

You will probably have to play with the width depending on padding and what not.

你可能需要根据填充物和不同的内容来玩宽度。

As a side note, If you haven't already, I recommend getting a tool like firebug, which will let you edit css and execute js on the fly. It is infinitely useful for fine tuning appearances.

作为补充说明，如果您还没有，我建议您使用firebug这样的工具，它将允许您动态编辑css并执行js。它对于微调外观是非常有用的。

#3

If you want to fill the width of the <ul> with the five <li>s, you will have to give those <li>s a width of 20% each.
Note that you need to change some other details of the CSS if you want to make this work; e.g. with a display:inline-block you make the spaces between the <li> count, so the total width of the <ul> content will be more than 100% wide. I'd suggest removing the display:inline-block and giving them float:left.

如果你想用5个

s来填充

的宽度，你必须给这些
• s各20%的宽度。请注意，如果您想要实现这一点，您需要更改CSS的一些其他细节;例如，通过显示:内线块，你在
• 各20%的宽度。请注意,如果您想要实现这一点,您需要更改CSS的一些其他细节,例如,通过显示:内线块,你在
• 计数之间设置空格，因此
  内容的总宽度将超过100%。我建议删除显示:inline-block并给它们浮动:left。

• 计数之间设置空格,因此内容的总宽度将超过100%。我建议删除显示:inline-block并给它们浮动:离开了。

年代来填充的宽度,你必须给这些年代各20%的宽度。请注意,如果您想要实现这一点,您需要更改CSS的一些其他细节,例如,通过显示:内线块,你在计数之间设置空格,因此内容的总宽度将超过100%。我建议删除显示:inline-block并给它们浮动:离开了。

Edit: Or do you want them to be distributed proportionally according to their contents? That would be a different challenge.

编辑:还是您希望它们按照内容按比例分布?这将是一个不同的挑战。

#4

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
            body{
                margin:0 auto;
            }
            .main{
                width:650px;
                border:1px solid red;
                padding:5px;
            }
            ul {
            padding:0;
            margin:0;
            width: 100%;
            border-bottom: 0;
            }
            li{
                display: table-cell;
                width: 1%;
                float: none;
                border:1px solid green;
                margin:2px;
                padding:10px;
                text-align:center;
            }
        </style>
    </head>
    <body>
       <div class="main">
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
       </div>
    </body>
</html>

#5

try below css:

试试下面的css:

style.css (line 87)

ul#menu li {
    float: left;
    margin: 0;
    padding: 6px 0;
    width: 11.1%;
}

style.css (line 113) 

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

style.css (line 95)

ul#menu li a {
    color: #999999;

    font-weight: bold;
    padding: 8px 20px 0;
    text-decoration: none;
    width: auto;
}

see screen shot:

看到屏幕截图: