如何让一个nav标签里的a无论多少个都能自动平分nav的宽度？

Question

如何让一个nav标签里的a无论多少个都能自动平分nav的宽度？

Answer 1

你的意思是a标签能多能少吧

 <nav style="width:800px; height:20px; display:inline-table;">
      <a href="#" style="display:table-cell">1</a>
      <a href="#" style="display:table-cell">2</a>
      <a href="#" style="display:table-cell">2</a>
 </nav>

上面的方法是行的但是这样的话就变成了table和td了，感觉怪怪的

Answer 2

转换成 ul>li 结构上会更合理一下，也更常见。苹果官网就是类似处理方式。

Answer 3

nav标签内部的实现应该也是 ul > li 这样，评分直接用css比较难做，可以用js计算宽度再写样式。

Answer 4

ul css display:-webkit-box
li css box-flex:1

需要支持CSS3的浏览器

Answer 5

我觉得除了一楼用的渲染成表格外，只能用js来控制

HTML:

<nav class="nav">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
</nav>

CSS:

<style>
    .nav{
        width:800px;
        height:50px;
    }
    .nav a{
        display:block;
        height:50px;
    }
</style>

• 需要引用到JQuery库文件

Js:

<script>
    var $nav = $(".nav"); 
    var nav_width = $nav.width();       //获取nav的宽度
    var a_num = $nav.find("a").length;  //获取a标签的数量
    $nav.find("a").css("width", nav_width/a_num * 100% );
</script>

Answer 6

CSS3中的flex就是干这个的，如果只考虑现代浏览器的话

HTML

<nav>
    <a href="#">a</a>
    <a href="#">b</a>
    <a href="#">c</a>
</nav>

CSS

nav{display:-webkit-flex;display:flex;}
a{-webkit-flex:1;flex:1;}
a:nth-child(1){background:#999;}
a:nth-child(2){background:#aaa;}
a:nth-child(3){background:#ccc;}

关于flex的更多 建议阅读这个css参考手册 http://css.doyoe.com/properties/flex/index.htm

Answer 7

要兼容低级浏览器不？