0

以下是我提交按钮的 HTML：

<div id="header">
     <table>
        <tr>
            <td><h1></h1></td>
            <td><input type="text" name="search" class="search"/>
             <input type="submit" class="search-btn" name="submit" value="Search"/></td>                        
        </tr>
      </table>
</div>

以下是我的 CSS ：

#header table td .search-btn{width: 60px; margin-left: 5px;                                                          
                             border: 1px solid #D5EA3B;
                             padding: 9px;
                             display: inline-block;
}

问题是当我尝试添加填充时，它会禁用提交按钮（不可点击），如果我要删除填充然后启用它（可点击）。这真是个奇怪的问题。我不明白这到底是什么。

任何帮助，将不胜感激。

4

2 回答 2

1

好的。

因此，首先您粘贴的 CSS 不太正确，请删除 #header 表等。

.search-btn{width: 60px; margin-left: 5px;                                                          
                             border: 1px solid #D5EA3B;
                             padding: 9px;
                             display: inline-block;
}

所以填充不是问题，边框是问题，使它看起来没有点击。如果您访问：http: //jsfiddle.net/3w4e5/2/，您会看到该按钮按预期工作，但是当您重新添加边框时似乎已损坏。

您还需要创建按钮的悬停和活动版本：

见：http: //jsfiddle.net/3w4e5/3/

更新：

请参阅此小提琴以了解添加的活动和悬停 CSS 版本，因此它显示按钮已悬停并单击，您的初始 CSS 使其成为按钮，因此按钮看起来不像被单击，但确实如此。

http://jsfiddle.net/3w4e5/4/

于 2012-12-10T12:42:30.940 回答
0

问题是因为，您添加了一个 border: 1px solid #D5EA3B;

更新：

问题是您包含输入 type="text" 和提交按钮的 td 重叠或位于提交的顶部。您应该将第二个 td 分成两个 td，并在一个 td 中输入类型文本，在另一个 td 中输入按钮。

于 2012-12-10T12:42:19.770 回答