Question

我检查了各种链接以实现此目的。其中一个是：from stack overflow

以下是我的代码：

＆＃13;

.a-deal {
  position: relative;
}

.deal-hd {
  float: left;
}

.deal-arw {
  float: right;
  padding: 10px;
  background: grey;
}

.deal-hd:after {
  content: '';
  width: 100%;
  border-bottom: solid 1px #d6d6d6;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

＆＃13;

<div class="a-deal clearfix">
  <h2 class="deal-hd">ebay Top Deals</h2>
  <!-- <div class="mark"></div> -->
  <div class="deal-arw">
    <a href="#" class="lt-arw">&#706;</a>
    <a href="#" class="rt-arw">&#707;</a>
  </div>
</div>

＆＃13;

要求：

仅使用伪选择器来准确到达两个div的中心
线宽应该是可扩展的。这意味着，如果任何div大小增加，该行应仅占用剩余空间。

Answer 1

您可以使用 flex 。不需要使用浮子。使用浮点数你必须写更多的css，使用变换和位置垂直对齐项目。

我还建议使用父:pseudo的{{1}}选择器而不是标题.a-deal

Stack Snippet

＆＃13;

.deal-hd

＆＃13;

.a-deal {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.deal-hd {
  margin: 0;
  background: #fff;
  z-index: 9;
  padding-right: 10px;
}

.deal-arw {
  padding: 10px;
  background: grey;
  z-index: 9;
  padding-left: 10px;
}

.a-deal:after {
  content: '';
  width: 100%;
  border-bottom: solid 1px #d6d6d6;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
}

＆＃13;

Answer 2

您可以在display: flex上使用flex: 1和deal-hd，这样就可以获得免费宽度并添加伪元素。

＆＃13;

.a-deal {
  display: flex;
  align-items: center;
}

.deal-hd {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
}

.deal-hd:after {
  content: '';
  height: 1px;
  background: black;
  flex: 1;
  margin: 0 10px;
}

＆＃13;

<div class="a-deal clearfix">
  <h2 class="deal-hd">ebay Top Deals</h2>
  
  <div class="deal-arw">
    <a href="#" class="lt-arw">&#706;</a>
    <a href="#" class="rt-arw">&#707;</a>
  </div>
</div>

＆＃13;

浮动div之间的水平线

2 个答案: