Question

我试图在bootstrap框架的帮助下创建一个看起来像按钮的div。但是当我增加div内部内容的字体大小时，按钮的宽度和高度会发生变化。我只是想增加字体。但按钮大小应该相同。
这是代码

.bigfatbutton{
    margin-top: 1em;
    margin-bottom: 2em;
    width: 80%;
    margin-left: 2em;
    background: #6130a3;
    height: 4em;
    text-align: center;
    padding-top: 1em;
    color: white;
    font-size: 15px;
}
<div class="bigfatbutton">
    Review & Pay
</div>

注意：我只想知道痛苦。一些有用的人提到我使用px填充和边距而不是我在我的代码片段中使用的。这样可以吗？如何影响响应能力是我关心的问题。请帮助我这方面。

Answer 1

试试这个。

  .bigfatbutton{ 
    width: 80%;
    background: #6130a3;
    text-align: center;
    color: white;
    font-size: 18px;
    padding: 20px 40px;
}
    <div class="bigfatbutton">
        Review & Pay
    </div>

Demo

Answer 2

问题是您要相对于fontsize定义边距和填充。（您在em中定义了它们，这等于字体大小。）通过将em尺寸更改为pt（或px），可以轻松克服这一问题。然后你会得到这样的东西：

.bigfatbutton{
  margin-top: 15pt;
  margin-bottom: 30pt;
  width: 80%;
  margin-left: 30pt;
  background: #6130a3;
  height: 60pt;
  text-align: center;
  padding-top: 15pt;
  color: white;
  font-size: 15px;
}

<div class="bigfatbutton">
  Review & Pay
</div>

Answer 3

将overflow: hidden添加到.bigfatbutton。只需根据您的要求更改font-size，按钮大小将保持不变。

Here是工作示例。

我还建议您推荐CSS Box Model，以便您可以根据需要更改代码。

为什么div会根据内容调整大小

3 个答案: