如何让一个nav标签里的a无论多少个都能自动平分nav的宽度?
你的意思是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了,感觉怪怪的
我觉得除了一楼用的渲染成表格外,只能用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>
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
ul css display:-webkit-box
li css box-flex:1
需要支持CSS3的浏览器
转换成 ul>li 结构上会更合理一下,也更常见。苹果官网就是类似处理方式。
nav标签内部的实现应该也是 ul > li 这样,评分直接用css比较难做,可以用js计算宽度再写样式。
要兼容低级浏览器不?