logo标签列表

使用CSS使<li>适应<ul>的宽度

csslist
34

我试图让 <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;
}
1
两个想法：1）为什么要使用inline-block？如果您想要全宽，为什么不直接使用block？2）您尝试过使用width:100%而不是width:auto吗？ - Andrew G. Johnson
将 width:auto 应用于 li 元素会导致其宽度与 ul 相同。因此，它将覆盖 inline-block 或 block。 - huMpty duMpty
你是否在寻找类似于这个 http://jsfiddle.net/XFCyn/1/ 的东西？ - huMpty duMpty
7个回答
87

我找到了一种处理单行全宽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及以下版本，您应该使用一些内联块的技巧 :)

JSFiddle

2
如果您需要使每个单元格根据其内容自适应更改大小，则可以将表格布局设置为“auto”。 - BenB
3

由于li数量可能会改变，我只能像你建议的那样使用javascript/jquery来完成这个任务。只需将100除以li的数量并在每个li上设置宽度即可。

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

您可能需要根据填充和其他因素调整宽度。
另一方面，如果您还没有这样的工具，我建议使用firebug等工具，可以让您即时编辑CSS并执行JS。这对于微调外观是非常有用的。
1
如果您想要用五个<li>填满<ul>的宽度，您需要给这些<li>每个设置20%的宽度。
请注意，如果您想要实现这一点，您需要更改CSS的其他细节；例如，使用display:inline-block会使<li>之间的空格计算在内，因此<ul>内容的总宽度将超过100%。我建议删除display:inline-block并给它们设置float:left。

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

0

哇，这里发现了一个非常古老的问题。

对于任何人在这里滚动并看到这个问题，在2022年，这很容易通过flexbox实现。

#menu {
  display: flex;
  gap: 1rem;
}

li {
  list-style-type: none;
}
<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>

0
#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>
2
请在您的答案中添加一些解释。 - YLR
0
<!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>
-2

尝试以下 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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接