实现这一目标的最佳方式是什么

Question

我需要.left-arrow和.right-arrow一直到右边，“1 - 6 of 7”在他们左边。我目前有1个父div，我有上面提到的两个盒子。

我知道如何做到这一点，但我不确定这是否是最好的做法。我正在考虑创建另一个子元素并在其中放置“1 - 6 of 7”，.left-arrow和.right-arrow。将此子元素右移即可实现我想要的结果。

如果这是正确的方法，请告诉我。在这种情况下你会采取哪种方法？

我基本上需要最终结果看起来像下面的截图：

.homepage-h2 {
	font-size: 16px;
	font-weight: normal;
	color: #050000;
	padding: 0;
	float: left;
	margin: 0;
}

.homepage-items-p {
	font-size: 13px;
	color: #050000;
	float: right;
	display: inline-block;
	font-weight: normal;
	padding: 0;
	margin: 0;
}

.Top-Tech-Products {
	width: 1030px;
	height: 243px;
	margin: auto;
	margin-top: 30px;
}

.left-arrow {
	width: 34px;
	height: 27px;
	border: 1px solid #f2f2f2;
	display: inline-block;
}

.right-arrow {
	width: 34px;
	height: 27px;
	float: right;
	border: 1px solid #d8d8d8;
	display: inline-block;
}

<div class="Top-Tech-Products">
  <h2 class="homepage-h2">Top Tech Products</h2>
  <p class="homepage-items-p">1 - 6 of 7</p>
  <div class="left-arrow"></div>
  <div class="right-arrow"></div>
</div>

Answer 1

在不使用float的情况下执行此操作的另一种方法有点像这样

使用display: inline-block，text-align: left，text-align: right和正确widths可以达到相同的效果。

** 全屏运行 **

body {
  max-width: 900px;
  border: 1px solid;
  margin: 0 auto;
}

.homepage-h2 {
	font-size: 16px;
	font-weight: normal;
	color: #050000;
	padding: 0;
	margin: 0;
  display: inline-block;
  width: 400px;
}

.homepage-items-p {
	font-size: 13px;
	color: #050000;
	font-weight: normal;
	padding: 0;
	margin: 0;
  display: inline-block;
  width: 400px;
  text-align: right;
}

.Top-Tech-Products {
	width: 100%;
	height: 243px;
	margin: auto;
	margin-top: 30px;
  font-size: 0;
}

.left-arrow {
	width: 50px;
	height: 27px;
	border: 1px solid #f2f2f2;
  display: inline-block;
  box-sizing: border-box;
}

.right-arrow {
	width: 50px;
	height: 27px;
	border: 1px solid #d8d8d8;
  display: inline-block;
  box-sizing: border-box;
}

<div class="Top-Tech-Products">
  <h2 class="homepage-h2">Top Tech Products</h2>
  <p class="homepage-items-p">1 - 6 of 7</p>
  <div class="left-arrow"></div>
  <div class="right-arrow"></div>
</div>

Answer 2

我没有看到您问题中所述的屏幕截图，但一般是接近此问题：一个基于Unicode Character，另一个使用Font Awesome。

＆＃13;

＆＃13;

.homepage-h2 {
  font-size: 16px;
  font-weight: normal;
  color: #050000;
  padding: 0;
  float: left;
  margin: 0;
}
.homepage-items-p {
  font-size: 13px;
  color: #050000;
  float: right;
  font-weight: normal;
  padding: 0;
  margin: 0;
}
.Top-Tech-Products {
  width: 1030px;
  height: 50px;
  margin: auto;
  margin-top: 30px;
  display: inline-block;
}
.left-arrow:after {
  content: '\276E';
}
.right-arrow:after {
  content: '\276F';
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="Top-Tech-Products">
  <h2 class="homepage-h2">Top Tech Products</h2>

  <p class="homepage-items-p"> <span class="left-arrow"></span> 1 - 6 of 7 <span class="right-arrow"></span>

  </p>
</div>
<div class="Top-Tech-Products">
  <h2 class="homepage-h2">Top Tech Products </h2> 


  <p class="homepage-items-p"> <i class="fa fa-chevron-left"></i> 1 - 6 of 7 <i class="fa fa-chevron-right"></i>
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;