javascript - 均匀分布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

只需使用 the flexbox model :

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

您还可以使用 space-between，并使用边距和填充来获得微调的外观。

Modified fiddle