Question

我有一系列按钮，我想在导航栏中均匀分布。我可以得到每个按钮的大小并解决它，但我想知道有没有办法自动解决这个问题，并在页面加载时设置这些宽度。在那一刻，我有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;
}

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/

Answer 2

我认为padding可以解决您的问题：

.nav_btn,.nav_btn_drop_down{
    float:left;
    color:#78f7fa;
    padding: 10px;
}

Fiddle

Answer 3

是的，这是可能的。您可以始终使用百分比作为每个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％

请参阅此处的小提琴：

http://jsfiddle.net/t9t2D/

有没有办法自动空间CSS中的按钮

3 个答案: