我正在尝试制作与此类似的购物车:
但是我似乎无法弄清楚如何在左侧获得本地传递,在右侧获得其中的圆圈(带有加号)。
HTML:
<div class="col" style="width:342px;height:69px;">
<p class="text-left center-block" style="width:451px;padding:-22px;">Local Delivery<button class="btn btn-primary align-items-center" type="button" id="cartHaz" style="padding:1px;margin:15px;"></button></p>
CSS:
element.style {
width:518px;
height:68px;
}
.d-flex {
display:-ms-flexbox!important;
display:flex!important;
}
.form-row {
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
margin-right:-5px;
margin-left:-5px;
}
div {
resize:both;
height:auto;
}
我已经尝试过在单行中创建两列,然后将圆形按钮浮动到右侧,但这没有用。
答案 0 :(得分:2)
遵循此代码
.circle{
margin-top: 12px;
height: 25px;
width: 25px;
border: 1px solid #45B4FE;
border-radius: 50%;
display: inline-block;
/* color: red; */
background-color: #cae3f9;
}
.circle-plus{
position: relative;
background-color: #45B4FE;
width: 50%;
height: 12.5%;
left: 25%;
top: 43.75%;
}
.vertical-plus{
position: relative;
background-color: #45B4FE;
width: 21.5%;
height: 399%;
left: 40.75%;
top: -127.5%;
}
<p style="float: left">Change Delivery</p>
<div class="circle">
<div class="circle-plus">
<div class="vertical-plus">
</div>
</div>
</div>
希望它可以解决您的问题!
答案 1 :(得分:0)
我只使用引导程序类
也许这可以帮助:)
.content-wrapper{
background-color: #ccf5ff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row py-3 pl-3 pr-3 content-wrapper">
<div class="col-md-6">
<div class="pull-left">
<h2 class="lead">Local Delivery</h2>
</div>
</div>
<div class="col-md-6">
<div class="pull-right">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>