温馨提示:本文翻译自stackoverflow.com，查看原文请点击：html - button with display:block not stretched
css html

html - 带显示的按钮：块未拉伸

发布于 2020-03-28 23:20:39

考虑以下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%因为它们会由于边距而溢出其父块。

查看更多

查看更多

提问者
Martin Ždila
被浏览
16
分享
welldan97 2012-03-14 17:35

您可以向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>​

演示：http：//jsfiddle.net/xwt9T/1/

FrancescoMM 2016-06-23 06:41:38

我建议使用box-sizing：border-box，以将按钮填充保持在100％内

相关问题

1
CSS：背景图片上的背景色
2
创建加载消息，这些消息将根据 shiny 的应用程序中情节的加载时间而改变
3
内部元素的CSS选择器
4
使用CSS将背景隐藏在属于其他域的iframe中
5
如何定义随浏览器缩放级别缩放的字体大小？
6
圆角边界
7
div中的p标签会影响相邻div的位置
8
下拉导航菜单显示在右侧并水平堆叠
9
调整窗口大小时为什么会被切断？
10
以增加的间距在vuetify网格中将v-col的n个中心居中

热门github

1
real time face swap and one-click video deepfake with only a single image
2
A quick example of how one can "synchronize" a 3d scene across multiple windows using three.js and localStorage
3
ChatGPT DAN, Jailbreaks prompt
4
21 Lessons, Get Started Building with Generative AI 🔗 https://microsoft.github.io/generative-ai-for-beginners/ (翻译：12 节课程，开始使用生成式 AI 进行构建)
5
Curated list of project-based tutorials (翻译：收藏了基于项目的教程列表)
6
Truly independent web browser
7
Python - 100天从新手到大师
8
An open source payments switch written in Rust to make payments fast, reliable and affordable (翻译：YOLOv8 🚀 in PyTorch > ONNX > CoreML > TFLite)
9
Agent S: an open agentic framework that uses computers like a human
10
Master programming by recreating your favorite technologies from scratch. (翻译：在这个项目中，你能学会如何创造自己的各种工具，引擎，游戏，框架，库......)
11
Jelly Evolution Simulator
12
Collection of leaked system prompts
13
🤯 Lobe Chat - an open-source, modern-design AI chat framework. Supports Multi AI Providers( OpenAI / Claude 3 / Gemini / Ollama / DeepSeek / Qwen), Knowledge Base (file upload / knowledge management / RAG ), Multi-Modals (Plugins/Artifacts) and Thinking. One-click FREE deployment of your private ChatGPT/ Claude / DeepSeek application. (翻译：LobeChat 是开源的高性能聊天机器人框架，支持语音合成、多模态、可扩展的（Function Call）插件系统。)