Question

我正在为着陆页创建一个表单，因此我希望将文本输入字段并排保留，这样我就不会让表单变长。我尝试做这样的事情：

但现在看起来真的很难，这就是我目前的形式：

＆＃13;

.teaser-right {
  float: right;
  width: 45%;
  margin: 3% 0 0 0
}

#calltoaction-form {
  background: #f2f2f2;
  padding-bottom: 10px;
  width: 800px;
  position: right;
  bottom: 0
}

＆＃13;

<div id="calltoaction-form" class="teaser-form">
  <div class="form-title">
    <h3>sample form</h3>
  </div>
  <form id="contact_form" action="_contact-us.php" method="post">
    <div class="form-header">
      <h4>Personal details</h4>
    </div>
    <div class="form-section">
      <input id="name" name="name" type="text" placeholder="Your name">
    </div>
    <div class="form-section">
      <input id="email" name="email" type="text" placeholder="Your email">
    </div>

＆＃13;

Answer 1

将此添加到您的CSS：

{{1}}

Answer 2

要将2个输入字段放在一起，您可以使用float。如果你浮动你需要的元素，以确保你在父div上使用clearfix hack。否则父div不会有高度。

另一种选择是使用display: inline-block如果使用display inline-block，则需要将父级的font-size重置为0.使用的元素显示：inline-block需要获取{ {1}}例如。使用显示内联块，您可以获得轻微的高度差异。

示例：

font-size: 12px;

https://jsfiddle.net/ymma61hu/3/

Clearfix hack：

https://css-tricks.com/snippets/css/clear-fix/

示例2：

float: left;

https://jsfiddle.net/vh49gtzL/

Answer 3

你好把输入元素放在同一个div里面看小提琴。 https://jsfiddle.net/v5omym1a/

<div id="calltoaction-form" class="teaser-form">
  <div class="form-title">
    <h3>sample form</h3>
  </div>
  <form id="contact_form" action="_contact-us.php" method="post">
    <div class="form-header">
      <h4>Personal details</h4>
    </div>
    <div class="form-section">
      <input id="name" name="name" type="text" placeholder="Your name">
       <input id="email" name="email" type="text" placeholder="Your email">
    </div>

Answer 4

我清理了你的标记了一下。您不需要将<h3>和<h4>包裹在 div -s中 - 这些也是块级元素，并且可以完美地设置样式。

#calltoaction-form {
  background: #f2f2f2;
  padding-bottom: 10px;
  width: 800px;
  position: right;
  bottom: 0;
  overflow: hidden;
}

.form-section {
  float: left;
  width: 50%;
}

label {
  display: block;
  margin-bottom: .25em;
}

  <div id="calltoaction-form" class="teaser-form">
    <h3 class="form-title">sample form</h3>

    <form id="contact_form" action="_contact-us.php" method="post">

      <h4 class="form-header">Personal details</h4>

      <div class="form-section">
        <label for="name">Name</label>
        <input id="name" name="name" type="text" placeholder="Your name">
      </div>

      <div class="form-section">
        <label for="email">Email</label>
        <input id="email" name="email" type="text" placeholder="Your email">
      </div>

    </form>
  </div>

Answer 5

.form-section {
      float: left;
      margin: 1%;
      width: 48.5%;
  }
  .form-section input {
    width: 100%;
  }
  .form-section:first-child {
    margin-left: 0;
  }
  .form-section:last-child {
    margin-right: 0;
  }
#calltoaction-form {
  background: #f2f2f2;
  padding-bottom: 10px;
  width: 100%;
  position: right;
  bottom: 0
}

<div id="calltoaction-form" class="teaser-form">
  <div class="form-title">
    <h3>sample form</h3>
  </div>
  <form id="contact_form" action="_contact-us.php" method="post">
    <div class="form-header">
      <h4>Personal details</h4>
    </div>
    <div class="form-container">
      <div class="form-section">
        <input id="name" name="name" type="text" placeholder="Your name">
      </div>
      <div class="form-section">
        <input id="email" name="email" type="text" placeholder="Your email">
      </div>
    </div>

如何并排放置两个文本字段？

5 个答案: