Question

有没有办法制作可变宽度的导航栏，我不知道如何为可点击区域做变量... http://jsfiddle.net/tirengarfio/a9ssC/

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

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

这里的诀窍是使用table作为CSS中display的值。

<强>演示

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

Answer 2

你可以用表来处理它，用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

可变宽度导航栏

2 个答案: