我有一系列按钮,我想在导航栏中均匀分布。我可以得到每个按钮的大小并解决它,但我想知道有没有办法自动解决这个问题,并在页面加载时设置这些宽度。 在那一刻,我有5个按钮和一个输入字段,并希望使这些跨度为800px div。
HTML:
<div class="nav">
<div class="nav_btn">HOME</div>
<div class="nav_btn">NEW IN</div>
<div class="nav_btn_drop_down">CLOTHING</div>
<div class="nav_btn_drop_down">ACCESSORIES</div>
<div class="nav_btn_drop_down">SHOP BY BRAND</div>
<div class="nav_btn"><form action="" method="POST"><input type="text" placeholder="Search..." /></form></div>
</div>
CSS:
.nav{
height:50px;
color:blue;
}
.nav_btn,.nav_btn_drop_down{
float:left;
color:#78f7fa;
}
答案 0 :(得分:2)
您可以使用display:table-cell
代替float
来使用此技巧:
.nav_btn, .nav_btn_drop_down{
display:table-cell;
width:1%;
white-space:nowrap;
text-align:center;
}
答案 1 :(得分:1)
答案 2 :(得分:0)
是的,这是可能的。您可以始终使用百分比作为每个nav_btn / nav_btn_drop_down的宽度。
.nav{
height:50px;
color:blue;
}
.nav_btn,.nav_btn_drop_down{
float:left;
color:#78f7fa;
box-sizing:border-box;
width:16.667%
}
导航中的每个项目都是itemcount / 100,宽度为〜= 16.667%
请参阅此处的小提琴: