Question

如何将div的宽度和高度修复为所需的量，例如像Bootstrap一样？它的按钮..

body {
        background-color: #f8f9fb;
        font-family: sans-serif;
    }
    
    /* Buttons... */
    .button {
        padding: 10px 10px;
        color: #fff;
        border-radius: 3px;
        text-align: center;
    }
    
    .green-button {
        background-color: #2cd865;
    }
    
    .green-button:hover {
        background-color: #61dc7a
    }

Buttons.. idk<br>
 <div onclick="alert('hey');" class="button green-button">Hello World!</div>

Answer 1

通过定义padding和font-size，引导按钮具有固定的高度。但是，它没有固定的宽度。请检查http://getbootstrap.com/css/#buttons，按钮的宽度会根据按钮内的文字而变化。

要修复按钮的宽度，您可以将.button设为inline-block并为其定义width。

这是一个固定宽度和高度的例子：

.button {
  padding: 10px 10px;
  color: #fff;
  border-radius: 3px;
  text-align: center;
  font-size: 14px;
  width: 100px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

请注意，由于按钮的宽度和高度是固定的，如果按钮内的文字太长，文本的某些部分将被隐藏。

如果按钮需要展开，当其中的文字太长时，可以使用min-width：

.button {
  padding: 10px 10px;
  color: #fff;
  border-radius: 3px;
  text-align: center;
  font-size: 14px;
  min-width: 100px;
  display: inline-block;
}

Answer 2

您可以在css中组合最小宽度和最大宽度。此示例将宽度设置为100px。

.button {
    max-width: 100px;
    min-width: 100px;
 }

这里是W3学校的链接，您可以在其网站上试用。

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_dim_max-width

固定宽度和高度以适应CSS中的文本？

2 个答案: