HTML和CSS：制作一個與其父段落一樣寬的按鈕

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. 移除margin: 1px從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> 

Answer 2

寬度不考慮邊距。 您可以將嵌入式CSS中按鈕的寬度更改為：

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: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 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); 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

我刪除了一些padding和其他屬性，以支持flexbox 。

p {
  width: 200px;
  background-color: yellow
}

button {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #FFFFFF;
  background-color: #323B5A;
  line-height: 18px;
  height: 24px;
  border: none;
  margin: 1px;
  text-decoration: none;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  display: block;
  width: 100%;
}

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%;
}