Question

我想使按钮高度比默认值稍大一点，但是我不知道默认值是多少。我想使其动态化，最好使用％或vh / vw，以便在每个设备上看起来都不错。我还想知道默认的％/ vw / vh。

我用chrome查找了与按钮高度相关的body标签的高度，然后使用css将按钮高度设置为9vh，但这没有用，只是增加了身体的高度。然后，我将身高设置为100％，但这没什么区别。

我的代码：

.choice{
    width: calc(50vw - 12px);
    height: 25vh;
    text-align: center;
    line-height: 1em;
    font-size: 3.5vh;
    overflow: hidden;
    white-space: nowrap;
}

button, input[type="submit"]{
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: #0099FF;
  color: #FFFFFF;
  border-radius: 2px;
  border: 2px solid #0099FF;
  margin: 2px;
  height: 9vh;

}

button:hover, input[type="submit"]:hover{
    background-color: #FFFFFF;
    color: #000000;
}

我希望它的外观与代码类似（我在button, input[type="submit"]部分中删除了height属性，但是按钮却非常大！：

.choice{
    width: calc(50vw - 12px);
    height: 25vh;
    text-align: center;
    line-height: 1em;
    font-size: 3.5vh;
    overflow: hidden;
    white-space: nowrap;
}

button, input[type="submit"]{
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: #0099FF;
  color: #FFFFFF;
  border-radius: 2px;
  border: 2px solid #0099FF;
  margin: 2px; /* height used to be specified below */

}

button:hover, input[type="submit"]:hover{
    background-color: #FFFFFF;
    color: #000000;
}

Answer 1

我忍不住认为这是一个提出的问题。

为什么要使按钮高度“比默认值稍大”？大概是，您想要一个固定的高度，还是要一个动态高度来响应屏幕尺寸。我不明白为什么您想要基于HTML的默认值的任意大小。无论如何，按钮的默认高度将取决于字体大小。
如果不设置身高，则将由其子代的大小决定。如果您有一个设置了高度的body标签，然后添加一个9vh的按钮，那么您的身体也将为9vh。

编辑：

如果要使按钮具有基于主体的动态高度，则需要设置主体高度，然后将按钮的高度设置为其父代的百分比。例如。机身高度设置为“ 100vh”，按钮高度设置为“ 70％”或类似的效果。

HTML按钮的默认高度是多少？

1 个答案: