如何在 HTML 中设置按钮的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25014849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the size of button in HTML
提问by AdityaK
I have some buttons on my pure HTML/JS page. When the page is opened in browser, the button size is normal. But on refresh/reloading page, the button size is reduced. In fact, I have not set the button text value. The button's text is blank. How should I set the size of my button in HTML irrespective to the size of the text?
我的纯 HTML/JS 页面上有一些按钮。在浏览器中打开页面时，按钮大小是正常的。但是在刷新/重新加载页面上，按钮大小会减小。其实我还没有设置按钮文本值。按钮的文本是空白的。无论文本大小如何，我应该如何在 HTML 中设置按钮的大小？
回答by Gab
回答by Lemuel Botha
This cannot be done with pure HTML/JS, you will need CSS
这不能用纯 HTML/JS 来完成，你需要 CSS
CSS:
CSS：
button {
width: 100%;
height: 100%;
}
Substitute 100% with required size
用所需尺寸替换 100%
This can be done in many ways
这可以通过多种方式完成
回答by ybdiel
button {
width:1000px;
}
or even
甚至
button {
width:1000px !important
}
If thats what you mean
如果这就是你的意思
回答by Jon Lee-White
If using the following HTML:
如果使用以下 HTML：
<button id="submit-button"></button>
Style can be applied through JS using the style object available on an HTMLElement.
可以使用 HTMLElement 上可用的样式对象通过 JS 应用样式。
To set height and width to 200px of the above example button, this would be the JS:
要将上面示例按钮的高度和宽度设置为 200px，这将是 JS：
var myButton = document.getElementById('submit-button');
myButton.style.height = '200px';
myButton.style.width= '200px';
I believe with this method, you are not directly writing CSS (inline or external), but using JavaScript to programmatically alter CSS Declarations.
我相信使用这种方法，您不是直接编写 CSS（内联或外部），而是使用 JavaScript 以编程方式更改 CSS 声明。
回答by Sadia Younas
#btn_l_w
{
height:100px;
width:200px;
font-size: 12px;
}
<button type="submit" id="btn_l_w">SAVE</button>