html - 文本框内右侧的按钮(这是最好的方法吗?)

标签 html css input

<分区>

我的解决方案(插入一个按钮并将其 float 到我的文本框的右侧)是否是执行此操作的最佳解决方案,它是否也能在 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>

最佳答案

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

试试这个。

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

关于html - 文本框内右侧的按钮(这是最好的方法吗?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17301500/

上一篇:css - 响应式侧边栏 - 如何实现?

下一篇:html - 嵌套 CSS 中的溢出父级 <div>

相关文章:

css - 背景大小图像 CSS 的响应高度

javascript - JS获取存储在var中的输入值/名称

c++ - cpp getline 在 while 循环中工作一次,然后读取直到文件末尾

java - 关闭 Java 输入/输出流

javascript - 有时间限制的 HTML 文本

html - CSS 1em 改变浏览器默认行高

html - css - 如果行数不同则 block 失控

javascript - 2个 slider 输入组合

javascript - 在javascript中动态创建id

php - 哪种方法更有效,是在单引号内使用双引号还是转义单引号?