Html 按钮位于文本框的右侧（这是最好的方式吗？）

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

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

<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>

#refdocs\u包装器{
边框：1px实心rgb（128128）；
高度：20px；
宽度：179px；
}
#REF按钮{
剪辑：矩形（1px200px 19px 1px）；
位置：绝对位置；
浮动：对；
高度：18px；
宽度：18px；
}
#REF\u输入{
边界：0；
宽度：154px；
填充：0px 0px 0px 2px；
}

将此添加到css中：

#refdocs_wrapper {
    position:relative;
 }

然后尝试将内部元素相对于外部元素进行绝对化。

您应该尝试以下操作：

#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;
}

---

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

这是我为Chrome、FF和IE得到的最好的元素。FF显然是最差的元素。请注意，我添加了：--moz focus-inner以帮助设置FF格式

以下是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
}

---

我觉得你把事情复杂化了

试试这个

HTML:

---

在Chrome中，对齐非常糟糕。我会小心Firefox如何渲染边框，我遇到过很多这样的情况。在我的Firefox 22 Betaclean和mean示例中，+对齐得太低了……太好了！

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

#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;
}