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

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

我已经尝试添加 “保证金：0重要” 的CSS在多个领域。我已经尝试了每个我能想到的方式来将按钮置于中心位置，而不让左侧和右侧的边距“可点击”。我所做的没有任何工作。请指教。不是在寻找你的优秀人才来为我工作 - 只是希望我的启示能够在这个问题上找到一些启示。我已经研究了好几个小时，但似乎无法得到它。因此，这是我的“最后的手段”。

谢谢！

来源

2014-01-22 chriscreation

使按钮成为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; 
}

来源

2014-01-22 20:11:09

你不应该在'a'这样的行内级元素中使用块级元素，比如'div'。只是想让你知道。 – Joeytje50

@ joeytje50你是对的 - 但是;它验证为HTML5。看到这个相关的答案http://stackoverflow.com/a/1828032/2680216此外，我没有改变标记，它已经是这样。 –

感谢您的帮助，伙计们。添加“display：inline-block;”到我的CSS“一个div.try-now-btn”完全修复它。 – chriscreation

您应该内联级元素从未嵌套块级元素。因此，您在a内的div的使用应该替换为a内的span。

此外，为了解决这个问题，我已经改变了你的display上（曾经被认为是div）span在a元素display:inline-block;。 inline-block元素不会自动占据整个宽度，并且它们不会像div那样表现得异常。

工作版本可以找到here。

来源

2014-01-22 20:11:21 Joeytje50

添加“display：inline-block;”到我的CSS“一个div.try-now-btn”完全修复它。而且，我认为你所说的一切都是知识的奖励;）谢谢！ – chriscreation

使用display:table在a div.try-now-btn

来源

2014-01-22 20:12:24

只需设置position到absolute或relative。请勿将!important用于您无法弄清的事情。这里是小提琴http://jsfiddle.net/3qX9X/2/

来源

2014-01-22 20:13:31 Esser

+1不要滥用！重要！ -1表示使用绝对值。这不会对布局的其他部分很友善。 –

@SurrealDreams我同意。这不是正确的答案。尽管如此，我很欣赏关于！重要用途的建议。 – chriscreation

显然这只有在他的布局有意义时才是如此。说实话，我甚至没有读完整个代码，只是快速地检查了小提琴。 – Esser

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

回答

相关问题