考虑以下HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<style>
button {
display: block;
margin: 10px;
}
</style>
</head>
<body>
<div style="width: 100px; border: 1px solid black">
<button>hello</button>
<button>hi</button>
</div>
</body>
</html>
我的问题是，为什么按钮不延伸到100％的宽度，如果他们display就是block。如何实现呢？我无法将按钮的样式设置为，width: 100%因为它们会由于边距而溢出其父块。
您可以向div容器中添加填充，并从按钮中删除水平边距。然后，您可以将宽度100％应用于它们：
<!DOCTYPE>
<html>
<head>
<title>TEST</title>
<style>
button {
display: block;
width:100%;
margin: 10px 0;
}
</style>
</head>
<body>
<div style="width: 100px; border: 1px solid black; padding:0 10px;">
<button>hello</button>
<button>hi</button>
</div>
</body>
</html>
手机
浏览
我建议使用box-sizing：border-box，以将按钮填充保持在100％内