如何使用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相同。