在表单中并排放置 html 按钮时遇到问题答案

【问题标题】：Having issues placing html buttons side by side in a form在表单中并排放置 html 按钮时遇到问题
【发布时间】：2014-12-31 03:55:02
【问题描述】：

这是我在这里的第一个问题。

我在将我的 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/

【问题讨论】：

你觉得它们是什么样的？他们看起来还不错
我觉得不错，刚刚在 Chrome 中测试过。
除了 100% 宽度的按钮，其他的都是并排的jsfiddle.net/j08691/g01juc2z。哦等等，你是说你把每个按钮都设置为 100% 宽度？
你想要的输出是什么？
我不是想把它设置为 100%，它应该是 50.. 生病发布发生在我身上的事情。看，看这里...jsfiddle.net/g01juc2z/2

标签： html css forms button

【解决方案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

【讨论】：

【解决方案2】：

在你的 css 中改变你写的地方

[name="1"]

替换为

[type="submit"]

不要像名字一样重复它另一个变化是

width:24%;

【讨论】：