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

Answer 2

你的CSS中的

在你写的地方做出这些改变

[name="1"]

替换为

[type="submit"]

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

width:24%;

在表单中并排放置html按钮的问题

2 个答案: