html - 如何使用 width 属性均匀地分隔导航栏的元素？

Question

这是一个模拟：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%;
}​

Answer 1

你的意思是这样吗？http://jsfiddle.net/LQ9DP/13/

Answer 2

你介意尝试给元素填充而不是给定宽度吗？在垂直居中文本的情况下，您可以使用与文本相同的文本包含框的高度line-height。