Question

我的页面有一个按钮，我也正在为它设计样式

<button id="logButton" >Iniciar sesión</button>

然后是css代码

#logButton
{
    width:119px;
    margin-bottom: 5px;
    padding-top: 3px;
    margin-left:35%;
    height: 25.5333px;
    font-weight: bold;
    font-size: 13px;
    font-family: helvetica, arial, sans-serif;
}

Here's a fiddle also

如果我添加bootstrap类btn它没有这样做，并且字体大小和按钮宽度都没有改变，我的问题是 bootstrap做了什么来保持文本到位？ < / p>

Answer 1

#logButton
{
    /* Removed height & width*/
    padding: 10px 20px; /* Added */
    margin-bottom: 5px;
    margin-left:35%;
    font-weight: bold;
    font-size: 31px;
    font-family: helvetica, arial, sans-serif;
}

Answer 2

这是元素的自然行为，具有固定的高度和宽度，内容总是会溢出，使用min-width和min-height会更好。

＆＃13;

#logButton
{
    min-width:119px;
    margin-bottom: 5px;
    padding-top: 3px;
    margin-left:35%;
    min-height: 25.5333px;
    font-weight: bold;
    font-size: 13px;
    font-family: helvetica, arial, sans-serif;

}

＆＃13;

<button id="logButton" >Iniciar sesión Iniciar sesión</button>

＆＃13;

如果您想了解bootstrap's .btn，请参阅css：

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

Answer 3

不要硬编码宽度。在左侧和右侧使用填充。干得好。

#logButton
{
    padding: 3px 15px 0 15px;
    margin-bottom: 5px;
    margin-left:35%;
    height: 25.5333px;
    font-weight: bold;
    font-size: 13px;
    font-family: helvetica, arial, sans-serif;

}

Answer 4

如果你想隐藏文本的溢出，那么使用{overflow：hidden}就是css代码。如果你想保留文字但不想增加，那么请使用{height：auto}

如何防止字体掉出按钮

4 个答案: