Question

我有一个css样式的按钮，它被完全破坏并在多行显示奇怪。但是，如果将按钮设置为输入而不是链接，则按钮看起来很完美。如何让我的链接按钮看起来与输入按钮相同？

以下是一个例子：

HTML：

<div style="width: 200px;">
    <table style="width:80%;">
        <tr>
            <td style=" text-align: left;   vertical-align: middle;">
                <BR>    <a class="btn" target="_parent" href="index.php?ts=fq">Daily&#x00A;Starting from:&#x00A;$15.22</a>

            </td>
            <td style=" width: 4%; text-align: left;    vertical-align: middle; text-align:right;">
                <BR>
                <input type="submit" value="6 Month Plans Starting from: $75.36" style="width:90px; top:50px; height:115px; white-space: normal;" class="btn">
                </submit>
            </td>
        </tr>
    </table>
</div>

CSS：

.btn {

    background: #FFCC02;

    border: none;

    padding: 10px 25px 10px 25px;

    color: #585858;

    border-radius: 4px;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    text-shadow: 1px 1px 1px #FFE477;

    font-weight: bold;

    box-shadow: 1px 1px 1px #3D3D3D;

    -webkit-box-shadow:1px 1px 1px #3D3D3D;

    -moz-box-shadow:1px 1px 1px #3D3D3D;

}

.btn:hover {

    color: #333;

    background-color: #EBEBEB;

}

左边的按钮被破坏了，但右边的按钮看起来很完美。

Answer 1

按钮是内联元素。

给它display: block;或display: inline-block;

Answer 2

将display: block添加到您的.btn css规则中，以防止该元素的inline原生显示损坏其中的文本。

https://jsfiddle.net/tasenudr/1/

.btn {

    background: #FFCC02;

    display: block;

    border: none;

    padding: 10px 25px 10px 25px;

    color: #585858;

    border-radius: 4px;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    text-shadow: 1px 1px 1px #FFE477;

    font-weight: bold;

    box-shadow: 1px 1px 1px #3D3D3D;

    -webkit-box-shadow:1px 1px 1px #3D3D3D;

    -moz-box-shadow:1px 1px 1px #3D3D3D;

}

Answer 3

您必须将.btn设置为display: inline-block或display: block才能使其正常工作。

更新小提琴：
https://jsfiddle.net/tasenudr/3/

.btn{
    display: inline-block;
    min-width: 200px;
    text-align:center;
}

如何防止我的按钮被损坏？

3 个答案: