0

我正在尝试制作与此类似的购物车：

我想要的是

但我似乎无法弄清楚如何在左侧获得本地交付，在右侧获得圆圈（带加号）。

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;
}

这就是我得到的： 跛脚车

我已经尝试在一行中创建两列，然后将圆形按钮浮动到右侧，但它不起作用。

4

2 回答 2

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>

希望它能解决你的问题！！

于 2018-09-08T02:28:07.700 回答
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>

于 2018-09-08T02:34:08.340 回答