0

我想在 div 元素内均匀分布菜单链接。当我向左浮动时，我会在右侧获得空间。jsfiddle 示例 我正在使用的 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;
}
4

6 回答 6

2

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

这是您更新的小提琴。

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

有关显示和表格布局属性的更多信息。

于 2013-02-14T14:44:20.897 回答
0

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

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

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

干杯，

于 2013-02-14T14:49:08.480 回答
0

试试这个解决方案，然后添加 yut 自己的风格：

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

于 2013-02-14T14:50:09.223 回答
0

如果您打算应用填充，您应该使用它，但减少width: 20%它。li如果您想20px在左侧填充，您应该根据17%自己的喜好将宽度设置为大约或更低。

PS：永远记住 CSS 框布局规则：result = target / offset.

于 2013-02-14T14:51:12.960 回答
0

你离开了空间，因为你这样做了：

padding: 0 0 0 20px;

填充：。. . .20px 均值

padding-left:20px;

如果您减少填充左像素在 Jsfiddle 上预览，这就是它的 样子

于 2013-02-14T14:51:24.247 回答
0

缺少链接，这是您更新的小提琴。.

<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;
}
于 2013-02-14T15:03:24.597 回答