css - 可变宽度导航栏

Question

有什么方法可以制作可变宽度导航栏，我不知道如何使可点击区域可变... http://jsfiddle.net/tirengarfio/a9ssC/

如您所见，现在我padding为anchor标签设置了 50px，但我希望它实际上是可变的..

这是jsfiddle代码：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height:20px;
  background-color:red;
  border:2px solid;
}
li {
  float: left;
  width: 50%;
  text-align:center;
}
a {
 padding: 0 50px;   
}

Answer 1

您可以使用表格处理它，通过 javascript 破解 css。或者你也可以使用 CSS3。如果你使用 CSS3，你的代码应该是这样的：

<style> 
    ul{
        display:-moz-box; /* Firefox */
        display:-webkit-box; /* Safari and Chrome */
        display:-ms-flexbox; /* Internet Explorer 10 */
        display:box;
        width:300px;
        border:1px solid black;
    }

    li {
        -moz-box-flex:1.0; /* Firefox */
        -webkit-box-flex:1.0; /* Safari and Chrome */
        -ms-flex:1.0; /* Internet Explorer 10 */
        box-flex:1.0;
        border:1px solid red;
    }
</style>
<ul>
    <li><a href="#">jkflasd</a></li>
    <li><a href="#">jkflasd</a></li>
    <li><a href="#">jkflasd</a></li>
</ul>

您可以在此处阅读有关 flexbox 的更多信息：http: //www.w3schools.com/cssref/default.asp#flexbox

Answer 2

试试这个：

HTML

<div class="nav">
    <ul>
        <li>1jkflasd</li>
        <li>2jkflasd</li>
        <li>3jkflasd</li>
        <li>4jkflasd</li>
        <li>5jkflasd jffjadj faljdf aljf adjf ladjf lkdjf alsjdf ldsjf ldsjf </li>
        <li>6jkflasd</li>
        <li>7jkflasd</li>
    </ul>
</div>

CSS

.nav {
    display: table;
    width: 100%;
}
ul {
    list-style: none;
    display: table-row;
    padding: 0;
    margin: 0;
    width: 100%;
    height:20px;
    background-color:red;
    border:2px solid;
}
li {
    display: table-cell;
    padding: 5px;
    text-align: center;
}

这里的技巧是在 CSS中使用tableas 值。display

演示

http://jsfiddle.net/jlratwil/4srb6/1/