如何在div中均勻分布菜單鏈接
[英]How can I evenly distribute menu links in div
問題描述
我想在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;
}
6 個解決方案
解決方案1
2 2013-02-14 14:44:20
解決方案2
0 2013-02-14 14:49:08
您可以在.nav ul li選擇器上使用width: 20%;text-align:center 。
這應該均勻分布lis，但你還必須刪除填充。
但是，我的解決方案適用於列表中的5個項目（由於width: 20% ）
干杯，
解決方案3
0 2013-02-14 14:50:09
試試這個解決方案，然后添加自己的風格：
<!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>
解決方案4
0
你應該用width: 20%至你的li ，但減少它，如果你打算申請填充。 如果你想要左邊20px的填充，你應該根據你的喜好將寬度設置為17%或更低。
PS：永遠記住CSS Box Layout Rule： result = target / offset 。
解決方案5
0 2013-02-14 14:51:24
解決方案6
0 2013-02-14 15:03:24
缺少鏈接，這是你的更新小提琴。 。
<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的內聯鏈接之間平均分配空間？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.