样式输入和按钮 - 高度问题

Question

我正在尝试设置一个干净的CSS来设置按钮的样式，以便在视觉上看起来与近输入字段合并。

我目前正在使用这个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元素，我只需要一个干净的代码，跨浏览器，并且运行良好。

Answer 1

您还需要覆盖margin元素上的默认input。

jsFiddle example

input, button {
    margin:0;
}

这样做，元素之间将不再有空格，假设标记之间也没有空格。请注意，inline元素尊重标记中的空格。

例如，即使重置默认margin之后，如果元素之间存在空格，则元素之间也会有空格(example)

---

对于您的第二个问题（使元素具有相同的高度），请执行以下操作：

input, button {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding:0;
    margin:0;
    vertical-align:top;
    line-height:30px;
    height:30px;
}

基本上，使用box-sizing更改框模型，再次重置margin / padding，使用vertical-align:top进行对齐问题，然后设置相等{{1两个元素上的/ line-height。

jsFiddle example

Answer 2

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

具有更高填充和不同边框颜色的演示：http://jsbin.com/OPiroyib/4/edit

^{（只需从span删除边框，然后为输入和按钮添加边框）这很简单。}

Answer 3

查看css-reset或normalize.css，将所有浏览器的默认值设置为“null”。
像bootstrap这样的css框架非常酷！

Answer 4

您是否考虑过使用简单的span标签而不是按钮，然后将onclick事件附加到它？ 以下似乎对我有用 - 尽管您可能需要使用reset / modenizer样式表使其在不同浏览器上更具可预测性。

http://jsfiddle.net/GRwqL/13/

<input class="nospace"></input><span class="nospace">Submit</span>

.nospace {
    margin: 0;
    padding: 0;
}

span.nospace {
   height: 1em;
   margin: 0;
   padding: 1px;
   border: 1px solid black;
}