我正在尝试设置一个干净的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/

10-11 12:31
查看更多