CSS Width 100% 无效答案

【问题标题】：CSS Width 100% has no effectCSS Width 100% 无效
【发布时间】：2017-12-02 01:37:19
【问题描述】：

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

【问题讨论】：

你不能为内联元素添加宽度——这就是 inline-block 的用途（为什么还要为 ie7 编码？）
你需要使用 display:block

标签： html css width

【解决方案1】：

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

【讨论】：

【解决方案2】：

我对 HTML 进行了一些更改，以便您的标题充当导航栏并设置在列表中。

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

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

【讨论】：