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

Question

看看图片，我有三个跨度在“健康问题”的顶部，两个宽度都会是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 { 
    display: inline-block; 
    width: 32%; 
} 

这就会把所有的元素以33％的宽度取决于父改变#wrap span风格。

当元素为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那么你也可以使用以下。所有主要浏览器版本都支持Flex盒。 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>