html - 如何从按钮的左侧和右侧删除可点击区域？

Question

我正在编辑一个主要使用表格来格式化其销售页面的网站。我不是表格的忠实粉丝，但这是我必须使用的全部。站长需要去掉Try Now 按钮左右两边的可点击区域，该区域位于一个表格的中央。一切看起来都不错，除了查看者可以单击一个不可见的“a href”区域，该区域延伸到表格的宽度作为按钮左右两侧的边距。我在下面包含了代码和一个 jsfiddle。

这是 HTML:

<table width="930px" align="center" style="margin: -20px 0 20px 0;">
    <tbody>
    <tr>

        <table width="930px" height="300px" style="background-repeat:no-repeat; margin-top:-10px;">
            <tbody>
                <tr>
                    <td align="center" valign="top">

                <tr>
                    <td valign="top" align="center">
                        <a href="#" id="try-now-btn-text">
                            <div class="try-now-btn" align="center">
                                TRY NOW
                            </div>
                        </a>
                   </td>
                </tr>

这是 CSS:

a div.try-now-btn {
    background-color:#7DC15C;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    padding-top:15px;
    padding-bottom:10px;
    width:200px;
    border-bottom: 5px solid #6DA850;
}

a div.try-now-btn:hover {
    background-color:#8BD666;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    padding-top:15px;
    padding-bottom:10px;
    width:200px;
    border-bottom: 5px solid #6DA850;
}

a#try-now-btn-text {
    color:#fff;
    font:bold 22px 'Helvetica Neue',sans-serif;
    line-height:30px;
    text-decoration:none;
    margin:none;
}

JSFiddle:

http://jsfiddle.net/3qX9X/

我尝试在多个区域的 CSS 中添加“margin:0!important”。我已经尝试了所有我能想到的方法来使按钮居中，但不允许左右边距“可点击”。我所做的一切都没有奏效。请指教。不是在找你们这些优秀的人来为我做我的工作 - 只是希望对这个主题有所启发以启发我。我已经研究了几个小时，但似乎仍然无法理解。因此，这是我的“不得已”。

谢谢!

Answer 1

使按钮成为 inline-block 元素会起作用。 EXAMPLE HERE

a div.try-now-btn {
    background-color: #7DC15C;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding-top: 15px;
    padding-bottom: 10px;
    width: 200px;
    border-bottom: 5px solid #6DA850;
    display: inline-block;
}