Question

经常解决此问题的方法是float，但在我的情况下它不起作用。我尝试使用flexbox，overflow:hidden作为父级，但它也没有帮助。

所以我有三个内联块元素。中心的宽度由文本长度定义，但其他宽度仅用于在已知高度的边上绘制黑线。像这样：

＆＃13;

.headline {
  width: 700px;
}

.headline>* {
  display: inline-block;
}

.blackline {
  background-color: #000;
  height: 10px;
}

＆＃13;

<div class="headline">
  <div class="blackline"></div>
  <h1>blah blah blah</h1>
  <div class="blackline"></div>
</div>

＆＃13;

父元素宽度是已知且常量，但中心的那个是可变的。

它应该看起来像这样： |---blah blah blah---| 因此<h1>元素始终位于中心，并且<div>都具有相同的宽度，这取决于<h1>宽度占用所有可用空间，因为我不知道有多少＆＃34;嗒嗒＆＃34;它将包含。

Answer 1

您可以像这样使用flexbox：

.headline {
  width: 500px;
  display:flex;
  align-items:center;
  border:1px solid;
}

.blackline {
  background-color: #000;
  height: 10px;
  flex:1;
}

<div class="headline">
  <div class="blackline"></div>
  <h1>blah blah blah</h1>
  <div class="blackline"></div>
</div>

您还可以像这样简化标记：

.headline {
  width: 500px;
  display:flex;
  align-items:center;
  border:1px solid;
}

.headline:before,.headline:after {
  content:"";
  background-color: #000;
  height: 10px;
  flex:1;
}

<div class="headline">
  <h1>blah blah blah</h1>
</div>

或者像这样：

.headline {
  width: 500px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid;
  background:linear-gradient(#000,#000) 0 50%/100% 10px  no-repeat;
}

h1 {
  background:#fff;
}

<div class="headline">
  <h1>blah blah blah</h1>
</div>

Answer 2

使用响应式测量来达到此目的，请参阅下面的示例：

.fullWidth{
width: 100vw;
height: 50px;
background-color: red;
}

<div class="fullWidth"></div>

Answer 3

使用fieldset和legend标签执行此操作的另一种方法。这可能不是这些标签的目的，但没有什么能阻止我们以不同的方式做事。

＆＃13;

div {
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  height: 20px;
}

fieldset {
  border: 0px;
  border-top: 1px solid #000;
}

＆＃13;

<div>
  <fieldset>
    <legend align="center">Blah Blah Blah</legend>
  </fieldset>
</div>

＆＃13;

小提琴： https://jsfiddle.net/z364h1ar/

使内联<div>的方法具有所有可用的宽度

3 个答案: