javascript - 有没有办法在CSS中自动间隔按钮

Question

我有一系列按钮，我想在我的导航栏上均匀分布。我可以得到每个按钮的大小并计算出来，但我想知道是否有一种方法可以自动计算并在页面加载时设置这些宽度。目前我有 5 个按钮和一个输入字段，我想将它们设为 800 像素的 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;
}

Answer 1

您可以使用 display:table-cell 而不是 float 来使用这个技巧:

.nav_btn, .nav_btn_drop_down{
    display:table-cell;
    width:1%;
    white-space:nowrap;
    text-align:center;
}

查看此演示 http://jsfiddle.net/xveV4/10/