[英]How can I evenly space out the elements of my navigation bar using the width attribute?
這是一個模擬: http : //jsfiddle.net/LQ9DP/
這里分別是HTML和相關的CSS部分:HTML:
<div id="footer">
<div class="nav_wrapper">
<ul id="list_orientation">
<li><a href="http://www.facebook.com">Facebook</a></li>
<li id = "portfolio_text"><a href="http://www.google.com">Portfolio</a></li>
<li><a href="http://www.google.com">Email</a></li>
</ul>
</div>
</div>
CSS:
#heading{
font-family:'ChunkFiveRomanRegular';
position: absolute;
font-size:80px;
top: 10%;
left: 0px;
width: 100%;
height: 1px;
text-align:center;
}
.border{
border-top: 5px dashed #000000;
border-bottom:5px dashed #000000;
padding:20px;
}
body{
background:#ffdd22;
}
#subheading{
font-family:'MuseoSlab500Regular';
text-align:center;
font-size:25px;
}
.nav_wrapper{
position:relative;
margin:auto;
/*width:30%;*/
/*Change this
width:30%;*/
}
.nav_wrapper ul li {display:inline; width:30%;}
.nav_wrapper ul li a {width:30%;}
#footer{
width:100%;
float:left;
position:fixed;
bottom:0;
z-index:100;
}
#list_orientation {
padding:0;
margin:0;
height:5%;
}
你的意思是這樣嗎? http://jsfiddle.net/LQ9DP/13/
您介意嘗試對元素進行填充而不是固定寬度嗎? 如果將文本垂直居中,則可以使用包含框的文本的高度與文本的line-height
相同。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.