html - 如何将 thee 跨度与父容器的宽度对齐？

Question

看图，我在“health issue”上面有3个span，宽度都是89%，是响应式的。挑战是我不能让“提问、问题、回答”的宽度与健康问题保持一致，尤其是当它有反应时。

#wrap {
  width: 89%;
  margin-bottom: 9px;
  margin: 24px auto;
}
#wrap span {
  float: left;
  padding: 19px;
}
#health_issue {
  width: 89%;
}

<div id="wrap">
  <span id="wrap_a">ASK</span>
  <span id="wrap_q">QUESTION</span>
  <span id="wrap_an">ANSWER</span>
</div>
<!--wrap-->
<div style="clear:both;">

  <div id="health_issue">
    <h1>My Health Issue</h1>
    <p>Describe your health problem</p>
  </div>
  <!--health_issue-->
</div>

Answer 1

您的元素当前为 inline因此他们不会响应宽度变化。您可以更改 #wrap span 的样式如下

#wrap span {
    display: inline-block;
    width: 32%;
}

这将根据父元素将所有元素置于 33% 的宽度。

当元素为 inline 时，这不起作用作为<span>标签是默认的。因此更改为 display: inline-block

完整片段

#wrap {
  width: 89%;
  margin-bottom: 9px;
  margin: 24px auto;
}
#wrap span {
  display: inline-block;
  width: 32%
}
#health_issue {
  width: 89%;
}

<div id="wrap">
  <span id="wrap_a">ASK</span>
  <span id="wrap_q">QUESTION</span>
  <span id="wrap_an">ANSWER</span>
</div>
<!--wrap-->
<div style="clear:both;">

  <div id="health_issue">
    <h1>My Health Issue</h1>
    <p>Describe your health problem</p>
  </div>
  <!--health_issue-->
</div>

如果您能够支持 flex boxes那么您也可以使用以下内容。所有主要浏览器版本都支持 flexbox 。 Internet Explorer 的现代规范存在一些问题。参见 can i use :

#wrap {
  width: 89%;
  margin-bottom: 9px;
  margin: 24px auto;
  display: flex;
}
#wrap span {
  flex-grow:1;
}
#health_issue {
  width: 89%;
}

<div id="wrap">
  <span id="wrap_a">ASK</span>
  <span id="wrap_q">QUESTION</span>
  <span id="wrap_an">ANSWER</span>
</div>
<!--wrap-->
<div style="clear:both;">

  <div id="health_issue">
    <h1>My Health Issue</h1>
    <p>Describe your health problem</p>
  </div>
  <!--health_issue-->
</div>