html - 在表单中并排放置 html 按钮时出现问题

Question

这是我的第一个问题。

我在并排获取我的 html 表单按钮时遇到问题。有人可以看一下并告诉我哪里出了问题吗？看起来它们应该默认放置在行内，但我想情况并非如此。

这是我的 html 代码。

        <input type="submit" name="1" formtarget="" value="1">
        <input type="submit" name="2" formtarget="" value="2">
        <input type="submit" name="3" formtarget="" value="3">
        <input type="submit" name="4" formtarget="" value="4">

这是表单输入和个人姓名的 CSS

#form input {
position: relative;
display: inline;
margin: 0;
padding: 0;
border: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 4px;
border-radius: 4px;
text-shadow: none;
line-height: 44px;
-webkit-appearance: none;
}

除了颜色变化之外，每个按钮都是一样的。

#form input[name="1"] {
margin-top: 8px;
height: 44px;
width: 50%;
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}
#form input[name="2"] {
margin-top: 8px;
height: 44px;
width: 50%;
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}

谁能帮我设置一下，让它们并排内联？

编辑:这就是它显示的内容。

http://jsfiddle.net/g01juc2z/2/

Answer 1

您将 4 个元素设置为 width:50%，这等于 200% 宽度。将它们更改为 width: 24%(inline-block 元素的自然间距为 1 或 2px)或更小，它们将对齐:

#form input[name="1"] {
  margin-top: 8px;
  height: 44px;
  width: 24%; <---------------
  background: #A901DB;
  border-bottom: 1px solid #B404AE;
  color: #FFF;
  font-size: 18px;
  text-align: center;
}

FIDDLE