CSS宽度100％无效

Question

我有一些带有按钮的div元素。我希望按钮填充div的宽度，但将宽度设置为100％无效。

#header {
  margin-left: 5%;
  margin-right: 2.5%;
  width: 42.5%;
}

#header>div {
  display: inline-block;
  display: -moz-inline-box;
  *display: inline;
  /* For IE7 */
  zoom: 1;
  /* Trigger hasLayout */
  width: 33.33%;
}

#previousChapter,
#nextChapter {
  background-color: white;
  border: none;
  color: #1c3e75;
  text-decoration: none;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  font-family: "papyrus";
  width: 100%;
}

<div id="header">
  <div><button id="previousChapter" onclick="getPreviousChapter()">Previous</button></div>
  <div>
    <h3 id="chapterTitle">Genesis 1</h3>
  </div>
  <div><button id="nextChapter" onclick="getNextChapter()">Next</button></div>
</div>

在这里你可以看到我的div的宽度：

按钮的宽度没有填满div：

Answer 1

在父div上使用display flex，将其宽度设置为您想要的宽度。

Answer 2

我稍微更改了HTML，因此您的标题充当导航栏并设置在列表中。

然后我使用display: flex;并排设置按钮，width: -webkit-fill-available;尽可能地填充div的宽度。

查看LINK
如果您需要帮助，请阅读我添加的评论。