Question

我正在努力使<li>符合<ul>的宽度，但即使使用width:auto它根本不起作用，我也不知道为什么。我尝试使用display:inline-block，但这是一样的。我不知道我会有多少个标签，所以这就是为什么我没有直接使用百分比。

我想在桌面上显示页面时显示内联列表，当我在智能手机上时（每次显示媒体查询），每行显示一个li。

我有这个：

<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看起来像这样：

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

Answer 1

我已经找到了处理单行全宽ul的方法，其中未定义数量的li元素需要均匀分布：

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

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

基本上，它模拟表格。适用于Gecko，Webkit，IE8 +。对于IE7及以下版本，你应该使用一些内联块hackery：）

JSFiddle

Answer 2

由于李计数可以改变，我只能想到用你建议的javascript / jquery完成这个。只需将#i除以100，然后设置每个的宽度。

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

你可能需要根据填充来播放宽度，而不是。

作为旁注，如果您还没有，我建议您使用firebug这样的工具，它可以让您编辑css并动态执行js。它对于微调外观非常有用。

Answer 3

如果您希望使用五个<ul>填充<li>的宽度，则必须为这些<li>提供每个宽度为20％的宽度。
请注意，如果要使其工作，您需要更改CSS的其他一些细节;例如使用display:inline-block，您可以在<li>计数之间设置空格，因此<ul>内容的总宽度将超过100％。我建议删除display:inline-block并给予float:left。

编辑：或者您希望根据其内容按比例分配它们吗？那将是一个不同的挑战。

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

Answer 5

#menu {
  padding: 0;
  margin: 0;
  border: 1px solid red;
  position: absolute;
}

#menu li {
  list-style-type: none;
  float: left;
  position: relative;
  padding-right: 10px;
}

#menu li a {
  text-decoration: none;
}

<ul id="menu">
  <li><a href="index.html">1A1CASĂ </a></li>
  <li><a href="html-css.html">H1TML-CSS </a></li>
  <li><a href="javascript.html">J1VASCRIPT </a></li>
  <li><a href="php.html">PHP </a></li>
  <li><a href="teste.html">TESTE </a></li>
  <li><a href="constact.html">CONTACT </a></li>
</ul>

Answer 6

尝试下面的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;
}

见屏幕截图：

enter image description here

使<CSS>使用CSS </ul> </li>使<ul>的宽度适合

6 个答案: