与100%的标签并排获取按钮

Question

我想让我的按钮并排而不是堆叠。目前，它们都被包裹在一个100%宽度的标签中——我希望它们是均匀的间隔。

<div className="row">  
<div className="col-lg-4 col-md-6 col-sm-6">
<div className="cs-row">
<label className="cs-acr-listing-feature">
<input
type="checkbox"
name={"Buyers"}
defaultChecked={this.props.defaultChecked}
value={this.state.checkBox}
onChange={this.handleCheckBoxChange}
/>
<i className="acr-feature-check fas fa-check" />
I'd like to buy!
</label>
<label className="cs-acr-listing-feature">
<input
type="checkbox"
name={"Sellers"}
defaultChecked={this.props.defaultChecked}
value={this.state.checkBox2}
onChange={this.handleCheckBoxChange2}
/>
<i className="acr-feature-check fas fa-check" />
I'd like to sell!
</label>
</div>
</div>

CSS (ACR-LISTING-FEATURE是限制因素)

.acr-listing-feature {
position: relative;
padding: 20px;
border: 1px solid rgba(0, 0, 0, 0.1);
cursor: pointer;
text-align: center;
width: 100%;
font-family: "Poppins", sans-serif;
font-weight: 600;
color: #101737;
font-size: 14px;
border-radius: 8px;
transition: 0.3s;
margin-bottom: 30px;
}

Answer 1

简单来说，你可以使用CSS Flexbox。

.parent {
display: flex;
align-items: center;
justify-content: space-around;
}
.child {
display: block;
}

<div class="parent">
<label class="child">
<input type="checkbox">
I'd like to buy!
</label>
<label class="child">
<input type="checkbox">
I'd like to sell!
</label>
</div>