css - float div 之间的水平线

Question

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

下面是我的代码:

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

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

要求:

1. 仅使用伪选择器使线正好位于两个 div 的中心
2. 线的宽度应该是可缩放的。这意味着以防万一，如果任何 div 大小增加，该行应该只占用剩余空间。

Answer 1

您可以只在 deal-hd 上使用 display:flex 和 flex:1，这样它就可以使用自由宽度并添加伪元素。

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

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