[英]How can I evenly space out the elements of my navigation bar using the width attribute?
Here's a simulation: http://jsfiddle.net/LQ9DP/ 这是一个模拟: http : //jsfiddle.net/LQ9DP/
And here's the HTML and relevant CSS sections respectively: HTML: 这里分别是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: 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%;
}
you mean like this? 你的意思是这样吗? http://jsfiddle.net/LQ9DP/13/ http://jsfiddle.net/LQ9DP/13/
would you mind trying to give padding to the elements instead of giving a fixed width? 您介意尝试对元素进行填充而不是固定宽度吗? And in case of centering the text vertically you may use the height of the text containing box same as the line-height
of the text. 如果将文本垂直居中,则可以使用包含框的文本的高度与文本的line-height
相同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.