html - 将 div 并排放置，生成自己的宽度以填充父 div

Question

我有一个 960px 宽的父 div，我有 5 个 div，我想平均填充父级的宽度。

我不只是划分 960 x 5 的原因是因为它们将充当按钮，如果我添加或删除一个按钮，我希望它们调整到父 div 的宽度。

我还希望每个 div 之间有 5px 的间隙，这样它们就不会接触。

这是我目前设置的 HTML：

<div class="parent">

   <a href="home.html"><div id="home">HOME</div></a>
   <a href="about.html"><div id="about">ABOUT</div></a>
   <a href="getoffer.html"><div id="getoffer">GET OFFER</div></a>
   <a href="testimonials.html"><div id="testimonials">TESTIMONIALS</div></a>
   <a href="contact.html"><div id="contact">CONTACT</div></a>

  </div>

完整的 JSFiddle

Answer 1

如果你愿意，你可以使用这个 JQuery 代码：

jsFiddle 在这里

var count = $(".parent a").length;
$(".parent div").width(function(){
    return ($(".parent").width()/count)-5;
}).css("margin-right","5px");

你可以用 . 计算父元素的子元素count = $(".parent a").length;。 资源

Answer 2

尝试

width: 18%

您可以在添加或删除时相应地调整宽度。

最后，在你的 CSS 中有很多重复，可以通过使用class='button'.

http://jsfiddle.net/WeQwc/1/