CSS宽度100％无效

I have some div elements with buttons inside of them. I want the buttons to fill the width of the div, but setting their widths to 100% has no effect.

我有一些带有按钮的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>

Here you can see the width of my div:

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

And the width of the button is not filling up the div:

并且按钮的宽度没有填满div：

2 个解决方案

#1

use display flex on parent div, set their widths to whatever you want.

在父div上使用display flex，将它们的宽度设置为你想要的宽度。

#2

I've changed the HTML a bit so your header acts as a navigation bar and set up in a list.

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

Then i use display: flex; to set the buttons side by side and width: -webkit-fill-available; to make the div's width fill as much as possible.

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

Check it out LINK
Read the comments i added if you need help.

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

#1