[英]Distribute buttons in div evenly
I have the following code ( JSFiddle ): 我有以下代码( JSFiddle ):
HTML: 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: 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: JS:
$( ".jqueryUIButton" ).button();
Now the three buttons are in the horizontal center of the DIV-Box. 现在三个按钮位于DIV-Box的水平中心。 But I want them evenly distributed over the whole width. 但是我希望它们在整个宽度上均匀分布。 How can I do that? 我怎样才能做到这一点?
Would love any advice. 会喜欢任何建议。 Thanks! 谢谢!
Simply use the flexbox model : 只需使用flexbox模型 :
display: flex;
justify-content: space-around;
You can also use space-between
, and play with margins and padding for a fine-tuned look. 您还可以使用space-between
,并与边距和填充的微调一下玩。
That's a typical application for flexbox: 这是flexbox的典型应用:
https://jsfiddle.net/aj88xck2/ https://jsfiddle.net/aj88xck2/
Just add display: flex;
只需添加display: flex;
and justify-content: space-around;
并justify-content: space-around;
(or space-between) to the container. (或间隔)到容器。
FlexBox to the Rescue: 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>
<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; **
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.