[英]HTML and CSS: making a button as wide as its parent paragraph
我有一个带有一些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>
您在按钮上有以下样式:
button {
margin: 1px;
width: 100%;
}
因此width: 100%
+ margin: 1px
将button
的宽度扩展了100%
即实际上是100% + 2px
。
要解决此问题,您可以:
margin: 1px
从button
margin: 1px
。 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>
宽度不考虑边距。 您可以将嵌入式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>
浏览器计算宽度时,似乎没有考虑边距。
<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>
您可以使用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>
检出我的代码段: 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%;
}
看一下盒子模型。 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%;
}
只需使用
button {
width: 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.