Question

我正在编辑一个主要使用表来格式化其销售页面的网站。我不是桌子的忠实粉丝，但这是我必须要做的。网站管理员需要从“立即尝试”按钮的左侧和右侧移除可点击区域，该按钮位于表格的中心。一切看起来都不错，除了观众可以点击一个不可见的“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;
}

Answer 2

你应该从不嵌套内联级元素中的块级元素。因此，div中对a的使用应替换为span内的a。

另外，要解决此问题，我已将display元素中的div span a更改为display:inline-block; }。 inline-block元素不会自动占据整个宽度，并且它们的行为不会像div那样奇怪。

可以找到工作版here。

Answer 3

在display:table

中使用a div.try-now-btn

Answer 4

只需将position设为absolute或relative即可。不要将!important用于你无法弄清楚的事情。这是小提琴http://jsfiddle.net/3qX9X/2/

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

4 个答案: