我正在尝试设置一个干净的CSS来设置按钮的样式,以使其看起来看起来像是与Near输入字段合并在一起的。
我目前正在使用此CSS:
button {
position: relative;
left: -4px;
box-sizing: border-box;
padding: 0 10px;
margin: 0;
font-size: 17px;
border: 1px solid gray;
border-radius: 0 3px 3px 0;
}
http://jsfiddle.net/GRwqL/
主要问题是
left
属性的使用,我认为这不是一个好习惯,主要是因为未在所有浏览器上正确处理。另一个问题是Internet Explorer和Firefox中的此代码使按钮的输入字段不高。
因此,我一直在寻找一些帮助来编写更好的跨浏览器和更清洁的代码。
我个人并不在乎是否需要包装元素或任何其他HTML元素,我只需要一个干净的代码,跨浏览器就可以了。
最佳答案
<span class="inputWithButton">
<input type="text"><button>Submit</button>
</span>
input, button{outline: none;}
.inputWithButton{
display:inline-block;
overflow:hidden;
border:1px solid gray;
border-radius: 3px;
}
.inputWithButton > *{
vertical-align:top;
border:0;
margin:0;
padding: 3px 10px;
}
.inputWithButton > input[type=text]{
width:150px;
}
.inputWithButton > button{
border-left:1px solid gray;
background:#eee;
cursor:pointer;
width:70px;
}
.inputWithButton > button::-moz-focus-inner {
border: 0;
}
具有较高填充率和不同边框颜色的DEMO:http://jsbin.com/OPiroyib/4/edit
(只需从
span
中删除边框,并在中为输入和按钮添加边框),这很容易。关于html - 样式输入和按钮-高度问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20201848/