32

我正在努力让两个 html 表单输入（名字和姓氏）并排出现在同一行。我尝试过使用浮点数，但这似乎使其余的输入无处不在。任何建议将不胜感激 - 这是我的代码：

HTML：

<form action="includes/contact.php" method="post">

    <label for="First_Name">First Name:</label>
    <input name="first_name" id="First_Name" type="text" />
    <label for="Name">Last Name:</label>
    <input name="last_name" id="Last_Name" type="text" /> 

    <label for="Email">Email:</label>
    <input name="email" id="Email" type="email" />

    <label for="Telephone">Telephone:</label>
    <input name="telephone" id="Telephone" type="tel" />

    <label for="Wedding">Wedding Date:</label>
    <input name="wedding" id="Wedding" type="date" />

    <label for="Requirements">Specific Requirements:</label>
    <textarea name="requirements" id="Requirements" maxlength="1000" cols="25" rows="6"> </textarea>

    <input type="submit" value="Submit"/>
</form>

CSS：

#contactpage form {
  overflow: hidden;
  display: block;
}

#contactpage form label {
  margin-top:12px;
  font-size: 1.15em;
  color: #333333;
  font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.2;
}

#contactpage form input {
  border: 1px solid #DDDDDD;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -khtml-border-radius: 0px;
  -webkit-border-radius: 0px;
}

#contactpage form input[type='text'] {
  width: 22%;
  display: inline!important;
  background: #F9F9F9;
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 1.1em;
  line-height: 1.4;
  padding: 6px;
}

#contactpage form input[type='email'],
#contactpage form input[type='tel'],
#contactpage form input[type='date'],
#contactpage form textarea {
  width: 94%;
  display: block;
  background: #F9F9F9;
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 1.1em;
  line-height: 1.4;
  padding: 6px;
}

#contactpage form input[type='submit'] {    
  float:right;
  clear:both;
  display: block;
  background: #F9F9F9;
  color: #333333;
  font-size: 1.5em;
  font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  padding: 20px 20px 40px;
}

#contactpage form input[type='submit']:hover {
  color: #FFFFFF;
  background: #f1bdb5;
}

这是JSBin 演示。

4

8 回答 8

45

将您的多个表单元素包装在一个div使用的类中

display: table

在里面，用一个使用的类div包装每一个。labelinputdivs

display: table-cell

远离floats！

参考

于 2013-09-05T23:18:31.460 回答
30

您可以将以下内容包装在 DIV 中：

<div class="your-class">

  <label for="First_Name">First Name:</label>
  <input name="first_name" id="First_Name" type="text" />
  <label for="Name">Last Name:</label>
  <input name="last_name" id="Last_Name" type="text" /> 

</div>

float:left在你的 CSS 中给出每个输入：

.your-class input{
  float:left;
}

仅举例

您可能需要调整边距。

记得申请clear:left或两者兼而有之".your-class"

于 2013-08-27T16:30:37.147 回答
22

更现代的解决方案：

使用display: flex和flex-direction: row

form {
  display: flex; /* 2. display flex to the rescue */
  flex-direction: row;
}

label, input {
  display: block; /* 1. oh noes, my inputs are styled as block... */
}
<form>
  <label for="name">Name</label>
  <input type="text" id="name" />
  <label for="address">Address</label>
  <input type="text" id="address" />
  <button type="submit">
    Submit
  </button>
</form>

于 2017-05-17T08:44:57.203 回答
2

使用表

<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0"> 
<tr>
<td><label for="First_Name">First Name:</label></td>
<td><input name="first_name" id="First_Name" type="text" /></td>
<td><label for="last_name">Last Name:</label></td> <td> 
<input name="last_name" id="Last_Name" type="text" /></td> 
</tr> 
<tr> 
<td colspan="2"><label for="Email">Email:</label></td> 
<td colspan="2"><input name="email" id="Email" type="email" /></td> 
</tr> 
<tr> 
<td colspan="4"><input type="submit" value="Submit"/></td> 
</tr> 
</table>
于 2013-08-27T16:27:23.097 回答
1

尝试在名字和姓氏输入/标签周围放置一个 div，如下所示：

<div class="name">
        <label for="First_Name">First Name:</label>
        <input name="first_name" id="First_Name" type="text" />

        <label for="Name">Last Name:</label>
        <input name="last_name" id="Last_Name" type="text" /> 
</div>

看看这里的小提琴：http: //jsfiddle.net/XAkXg/

于 2013-08-27T16:25:39.290 回答
1

您可以为每个标签创建一个类，并在其中放置：

display: inline-block;

以及width您需要的价值。

于 2020-04-07T17:48:30.853 回答
0

如果您想知道如何使用顺风来做到这一点，这里有一种方法：

<div className="block">
    <div className="inline-block">
    </div>
    <div className="inline-block">
    </div>
</div>

我不是最伟大的美联储，因此感谢您的反馈！谢谢！！

于 2022-01-29T14:12:39.260 回答
0

该测试在同一行上显示三个块，每块两个块。

.group {
    display:block;
    box-sizing:border-box;
}
.group>div {
    display:inline-block;
    padding-bottom:4px;
}
.group>div>span,.group>div>div {
    width:200px;
    height:40px;
    text-align: center;
    padding-top:20px;
    padding-bottom:0px;
    display:inline-block;
    border:1px solid black;
    background-color:blue;
    color:white;
}

input[type=text] {
    height:1em;
}
<div class="group">
    <div>
        <span>First Name</span>
        <span><input type="text"/></span>
    </div>
    <div>
        <div>Last Name</div>
        <div><input type="text"/></div>
    </div>
    <div>
        <div>Address</div>
        <div><input type="text"/></div>
    </div>
</div>

于 2020-12-27T06:24:05.450 回答