html均匀分布代码,javascript-在div中均匀分布按钮

博主求助如何使HTML中的三个按钮在页面宽度上均匀分布,通过CSS的display:flex和justify-content:space-around解决了问题。了解如何使用flexbox布局和微调间距来实现这一效果。
摘要由CSDN通过智能技术生成

我有以下代码(JSFiddle):

HTML:

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的水平中心.但是我希望它们在整个宽度上均匀分布.我怎样才能做到这一点?

希望有任何建议.谢谢!

解决方法:

display: flex;

justify-content: space-around;

您还可以使用间距,并使用边距和填充进行微调.

标签:css,html,javascript,jquery

来源: https://codeday.me/bug/20191027/1941766.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值