css - 可变宽度导航栏

Question

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

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

这是 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

试试这个:

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 中使用 table 作为 display 的值。

演示

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