Question

我想在div元素中均匀分布菜单链接。当我向左漂浮时，我会向右边开出空格。 jsfiddle Example 我正在使用的HTML是

<div id="header" class="nav"> 
<ul >
    <li>Home</li>
    <li>About</li>
    <li>Vision</li>
    <li>Clients</li>
    <li>Partners</li>
</ul>
</div>

虽然css是

#header {
position: relative;
width: 60%;
height: 40px;
margin: 0px auto;
font-size: 25px;
margin-top: 20px;
padding-top: 15px;
border-radius: 5px; 
background-color: black  ;
}

.nav ul
{
list-style: none;
padding: 10px 10px 0px 1px;
margin:  0;
}

.nav ul li
{
list-style: none;
float: left;
padding: 0 0 0 20px;
font-weight: normal;
}

Answer 1

一种方法是ul{ display: table; table-layout:fixed; } li{ display: table-cell }。

这是你的updated fiddle。

注意：再次出现IE问题。对于Internet Explorer，它将从8版开始工作。

有关display和table-layout属性的详情。

Answer 2

您可以在width: 20%;text-align:center选择器上使用.nav ul li。

这应该均匀分布lis，但你也必须删除填充。

但是，我的解决方案适用于列表中的5个项目（由于width: 20%）

干杯，

Answer 3

尝试此解决方案，然后添加自己的风格：

<!DOCTYPE html>
<html>
<head>
<style>
ul{
   list-style-type:none;
   margin:0;
   padding:0;
   overflow:hidden;
}
li{
   float:left;
}
a{
   display:block;
   width:60px;
   background-color:#dddddd;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

Answer 4

您应该width: 20%使用li，但如果您计划应用填充，请减少20px。如果您想在左侧填充17%，则应将宽度设置为result = target / offset或更低，以符合您的偏好。

PS：永远记住CSS Box布局规则：{{1}}。

Answer 5

你留下了Spaces，因为你做到了这一点：

padding: 0 0 0 20px;

填充：。。。 .20px意思

padding-left:20px;

如果减少左边的填充像素，它应该是这样的 Preview on Jsfiddle

Answer 6

缺少链接，这是您的updated fiddle.。

<div id="header" class="nav"> 
<ul >
    <li ><a href="#">Home</a></li>
    <li ><a href="#">About</a></li>
    <li ><a href="#">Vision</a></li>
    <li ><a href="#">Clients</a></li>
    <li ><a href="#">Partners</a></li>
</ul>


</div> 



#header {
   position: relative;
   width: 90%;
   height: 40px;
   margin: 0px auto;
   font-size: 25px;
   margin-top: 20px;
   padding-top: 15px;
   border-radius: 5px; 
   background-color: black  ;
   color: white;
   }
.nav ul{
   list-style: none;
   margin:  0;
   display: table;
   table-layout: fixed;
   width: 100%;
   }

.nav ul li{
   list-style: none;
   padding: 0 10px;
   font-weight: normal;
   display:table-cell;
   text-align: center;
}

.nav li > a{
   display:block;
   color : white;   
   text-decoration : none;
}

如何在div中均匀分布菜单链接

6 个答案: