如何在 HTML 中设置按钮的大小答案

【问题标题】：How to set the size of button in HTML如何在 HTML 中设置按钮的大小
【发布时间】：2014-09-20 19:08:58
【问题描述】：

我的纯 HTML/JS 页面上有一些按钮。在浏览器中打开页面时，按钮大小正常。但是在刷新/重新加载页面上，按钮大小会减小。事实上，我还没有设置按钮文本值。按钮的文本为空白。无论文本大小如何，我应该如何在 HTML 中设置按钮的大小？

【问题讨论】：

【解决方案1】：

你的意思是像this这样的东西吗？

HTML

<button class="test"></button>

CSS

.test{
    height:200px;
    width:200px;
}

如果您想使用内联 CSS 而不是外部样式表，请参阅this：

<button style="height:200px;width:200px"></button>

【讨论】：

这不是避免 CSS，它只是使用内联 CSS 而不是外部样式表。
内联 CSS 解决方案是我真正在寻找的解决方案。
“避免 CSS”部分仍然技术上使用 CSS。
内联 CSS 更灵活，可能需要不同按钮的不同宽度。
我读到内联元素不采用 width 和 height ，为了使它们采用 height 和 width ，我们需要将显示设置为 display: inline-block。但是这里的 width 和 height 属性在没有 display: inline-block 的情况下工作得很好。

【解决方案2】：

这不能用纯 HTML/JS 完成，你需要 CSS

CSS：

button {
     width: 100%;
     height: 100%;
}

用所需尺寸替换 100%

这可以通过多种方式完成

【讨论】：

【解决方案3】：

button { 
  width:1000px; 
}

甚至

 button { 
    width:1000px !important
 }

如果这就是你的意思

【讨论】：

【解决方案4】：

如果使用以下 HTML：

<button id="submit-button"></button>

可以使用 HTMLElement 上可用的样式对象通过 JS 应用样式。

将上述示例按钮的高度和宽度设置为 200px，这将是 JS：

var myButton = document.getElementById('submit-button');
myButton.style.height = '200px';
myButton.style.width= '200px';

我相信使用这种方法，您不是直接编写 CSS（内联或外部），而是使用 JavaScript 以编程方式更改 CSS 声明。

【讨论】：