html - 文本框内右侧的按钮（这是最好的方法吗？）

Question

我的解决方案（插入一个按钮并将其浮动到我的文本框的右侧）是否是最好的，它是否可以跨浏览器兼容 HTML 5 标准？

我的 [+] 似乎也有点偏离顶部的中心。

<style>
#refdocs_wrapper {
    border: 1px solid rgb(128,128,128);
    height: 20px;
    width: 179px;
}
#refdocs_button {
    clip:rect(1px 200px 19px 1px);
    position: absolute;
    float: right;
    height: 18px;
    width: 18px;
}
#refdocs_input {
    border: 0;
    width: 154px;
    padding:0px 0px 0px 2px; 
}
</style>


<div id="refdocs_wrapper">

    <input id="refdocs_input" type="text">

    <input id="refdocs_button" type="button" value="+">

</div>

Answer 1

我认为你把事情复杂化了。

尝试这个。

HTML：

<div id="refdocs_wrapper">
    <input id="refdocs_input" type="text"/><input id="refdocs_button" type="button" value="+"/>
</div>

CSS：

#refdocs_wrapper {
    display: inline-block;
    padding: 1px;
    border: 1px solid rgb(128,128,128);

    line-height: 18px;
}
#refdocs_button {
    padding: 0;
    height: 20px;
    width: 20px;
}
#refdocs_input{
    width: 154px;
    padding: 0px; 

    border: 0;
}

Answer 2

在 css 中添加：

#refdocs_wrapper {
    position:relative;
 }

然后尝试相对于外部绝对内部元素。

Answer 3

你应该试试这个：

#refdocs_wrapper{
...
position:relative;
}
#refdocs_button {
clip:rect(1px 200px 19px 1px);
position: absolute;
right: xx%; /* or left */
top: xx%; /* or bottom */
height: 18px;
width: 18px;
}

具有绝对位置的元素相对于最近的相对位置父元素定位。

Answer 4

这是我在 Chrome、FF 和 IE 上得到的最好的。FF显然是其中最差的。请注意，我添加了 ::-moz-focus-inner 以帮助进行 FF 格式化。

http://jsfiddle.net/C7XEY/2/

这是CSS：

#refdocs_wrapper {
    border: 1px solid rgb(128,128,128);
    height: 20px;
    width: 179px;
}
#refdocs_button {
    float: right;
    height: 100%;
    width: 19px;
    font-weight: bold;
    text-indent: 0;
    padding: 0;
    vertical-align: middle;
}
#refdocs_input {
    border: 0;
    width: 154px;
    padding:0px 0px 0px 2px; 
}
#refdocs_button::-moz-focus-inner {
    padding: 0;
    border: 0
}