在div中均匀分配按钮

Question

我有以下代码（ JSFiddle ）：

HTML：

<div id="content">
  <div id="mainBox" class="textBox">
    <div id="mainMenuBar">
      <button class="jqueryUIButton">New Diagnosis</button>
      <button class="jqueryUIButton">My Diagnosises</button>
      <button class="jqueryUIButton">My Account</button>
    </div>
  </div>
</div>

CSS：

#mainMenuBar {
    background: linear-gradient(to bottom right, #30273a, #8d78a5);
    padding: 5px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    resize: none;
    border:1px solid #30273a;
    box-shadow: 0 0 10px #8d78a5;
    border-radius: 15px 15px 15px 15px;
}

#content {
    margin: 0 auto;
    margin-top: 100px; // former 250px
    padding: 0;
    width: 750px;
    max-width: 80%;
    padding-bottom: 40px;
    text-align: center;
}

JS：

$( ".jqueryUIButton" ).button();

现在三个按钮位于DIV-Box的水平中心。 但是我希望它们在整个宽度上均匀分布。 我怎样才能做到这一点？

会喜欢任何建议。 谢谢！

Answer 1

只需使用flexbox模型 ：

display: flex;
justify-content: space-around;

您还可以使用space-between ，并与边距和填充的微调一下玩。

修改小提琴

Answer 2

这是flexbox的典型应用：

https://jsfiddle.net/aj88xck2/

只需添加display: flex; 并justify-content: space-around; （或间隔）到容器。

Answer 3

FlexBox到救援：

 #mainMenuBar { background: linear-gradient(to bottom right, #30273a, #8d78a5); padding: 5px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; resize: none; border:1px solid #30273a; box-shadow: 0 0 10px #8d78a5; border-radius: 15px 15px 15px 15px; display: flex; justify-content: space-around; } #content { margin: 0 auto; margin-top: 100px; // former 250px padding: 0; width: 750px; max-width: 80%; padding-bottom: 40px; text-align: center; } 

 <div id="content"> <div id="mainBox" class="textBox"> <div id="mainMenuBar"> <button class="jqueryUIButton">New Diagnosis</button> <button class="jqueryUIButton">My Diagnosises</button> <button class="jqueryUIButton">My Account</button> </div> </div> </div> 

Answer 4

<button class="jqueryUIButton" style="height:20px; width:145px">New Diagnosis</button>

100％工作

** The length of the bar is 440px, divided by 3 you get 145px; **