Question

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

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

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

<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。

要解决此问题，您可以：

从margin: 1px移除button。
在padding上添加左/右缩进（p）。

＆＃13;

<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>

＆＃13;

Answer 2

宽度不考虑边距。您可以将内联CSS中按钮的宽度更改为：

width: calc(100% - 2px);

如果2px是您的保证金的总大小，它将起作用。

＆＃13;

<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:calc(100% - 2px);">OK</button>
</p>

＆＃13;

Answer 3

当浏览器计算宽度时，看起来没有考虑边距。

<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:calc(100% - 2px);">OK</button>
</p>

Answer 4

您可以使用margin: auto; width: calc(100% - 2px);，然后您需要调整的所有内容都是2px，背景边框颜色会以任意宽度显示在任意一侧。

<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:auto;
  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:calc(100% - 2px);">OK</button>
</p>

Answer 5

结帐我的代码段：https://codepen.io/imcodingideas/pen/oexLyw

我删除了一些AnnotationException: referencedColumnNames(f1, f2) of entity.BPK.bpk.a referencing com.example.entity.A not mapped to a single property和其他属性，转而使用padding。

flexbox

Answer 6

看看盒子模型。 https://www.paulirish.com/2012/box-sizing-border-box-ftw/

一种方法是使用calc，但另一种方法是在整个网站范围内调整你的思维，以便填充和边框在框中移动而不是像你一样被添加到外部完成你的按钮。

你可能不应该在你的段落中放一个按钮。

/* apply a natural box layout model to all elements, but allowing components to change */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

<section class="stuff"> <p> <button class='my-button'> <span>My Button</span> </button> </p> </section>

或

<section class="stuff"> <p> words </p> <button class='my-button'> <span>My Button</span> </button> </section>

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } section.stuff { max-width: 200px; } section.stuff p { border: 1px solid red; } .my-button { display: block; width: 100%; }

https://jsfiddle.net/sheriffderek/j6sqafqp/

Answer 7

只需使用

button {
width: 100%;
}

HTML和CSS：使按钮与其父段一样宽

7 个答案: