Question

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

example

我目前正在使用这个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

enter image description here

<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

enter image description here

^{（只需从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;
}

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

4 个答案: