如何將父跨度與父容器的寬度對齊？

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>