Html 如何防止我的按钮被弄坏？

我有一个css样式的按钮，它被完全弄坏了，并且在多行上奇怪地显示出来。但是，如果将按钮设置为输入而不是链接，则按钮看起来非常完美。如何使我的链接按钮看起来与输入按钮相同

以下是一个例子：

html:

---

左侧的按钮已损坏，但右侧的按钮看起来很完美。

按钮是一个内嵌元素

---

给它一个

显示：block或
显示：内联块
添加
display:block
到您的
.btn
css规则，以防止元素的
内联
本机显示损坏其中的文本


必须将
.btn
设置为
display:inline block
或
display:block
，才能正常工作

更新的小提琴：


非常感谢。这就解决了问题。我会记住的。
<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>

.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;

}

.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;

}

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