HTML 和 CSS : making a button as wide as its parent paragraph

Question

我有一个带有一些 CSS 代码的简单 HTML 页面。我正在尝试制作一个与其父段落一样宽的按钮。

问题是按钮右侧显示不正确。我应该在按钮的左侧和右侧看到 1px 的黄色背景。目前我看不到右侧的黄色像素。左侧看起来不错。

我的浏览器是 Mozilla Firefox 51.0.1 32 位。

<p style="width:200px; background-color:yellow">
<button style="box-sizing: border-box;
  height:24px;
  vertical-align:middle;
  text-align:center;
  padding-left:6px;
  padding-right:6px;
  padding-top:1px;
  padding-bottom:3px;
  border:none;
  margin:1px;
  background-color:#323B5A;
  font-size:11px;
  color:#FFFFFF;
  text-decoration:none;
  line-height:18px;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  display:block;
  width:100%;">OK</button>
</p>

Answer 1

按钮上有以下样式:

button {
  margin: 1px;
  width: 100%;
}

因此 width: 100% + margin: 1px 将 button 的宽度扩展到 100% > 即 100% + 2px 实际上。

要解决此问题，您可以:

1. 从 button 中移除 margin: 1px。
2. 在 p 上添加左/右缩进(padding)。

<p style="width:200px; background-color:yellow; padding: 0 1px;">
<button style="box-sizing: border-box;
  height:24px;
  vertical-align:middle;
  text-align:center;
  padding-left:6px;
  padding-right:6px;
  padding-top:1px;
  padding-bottom:3px;
  border:none;
  background-color:#323B5A;
  font-size:11px;
  color:#FFFFFF;
  text-decoration:none;
  line-height:18px;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  display:block;
  width:100%;">OK</button>
</p>