我认为这个会有所帮助

Question

我很难坚持一个项目。它需要一个表单，并将文本输入框/单选按钮/等对齐在页面的直线上。我已经用文本输入框实现了这个问题没有问题，但是我无法通过单选按钮，复选框或textareas来获取行为。代码是：

HTML：

<div class="containdiv">
    <label>Phone <img src="circle.gif" /></label>
    <input type="text" name="phone" maxlength="4" size="4">
    <input type="text" name="phone" maxlength="4" size="4">
    <input type="text" name="phone" maxlength="4" size="4">
</div>

<div class="containdiv">
    <label>Preferred Contact <img src="circle.gif" /></label>
    <div class="radio">
        <input type="radio" name="email" value="email">
        <label for="email">Email</label>
        <input type="radio" name="phone" value="phone">
        <label for="phone">Phone</label>
    </div>
</div>

CSS：

label {
    display: inline-block;
    float: left;
    clear: left;
    width: 250px;
    text-align: right;
}

input, select, span.radio, textarea {
    display: inline-block;
    margin: 3px;
    float: left;
}

非常感谢任何见解。

Answer 1

这是一个纯HTML和CSS示例。唯一的外部资源是我添加的谷歌字体来改进文本。它有点复杂但可以随意使用它。

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  font-family: Open Sans;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.text-center {
  width: 100%;
  text-align: center;
}
hr {
  width: 80%;
  margin: 5px 10%;
}
form {
  width: 60%;
  margin: 0 20%;
  display: inline-block;
}
form .form-group {
  width: 100%;
  margin: 10px 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
form .form-group label,
form .form-group .form-control {
  width: 50%;
  padding: 3px 10px;
  display: inline-block;
  margin: 0;
}
form .form-group > label {
  font-weight: bold;
  text-align: right;
}
form .form-group div.form-control {
  padding: 0;
}
form .form-group .checkbox,
form .form-group .btn {
  margin-left: 50%;
}
form .form-group .form-control label {
  width: 100%;
  margin: 0;
  padding: 0;
}
form .form-group .form-control label.radio-inline {
  width: auto;
  display: inline-block;
}

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

<!-- title -->
<h1 class="text-center">Form</h1>
<hr>

<form>
  
  <!-- email -->
  <div class="form-group">
    <label>Email</label>
    <input class="form-control" type="text">
  </div>

  <!-- who are you -->
  <div class="form-group">
    <label>Who you are</label>
    <textarea class="form-control" rows="4"></textarea>
  </div>

  <!-- favorite number -->
  <div class="form-group">
    <label>Favorite number</label>
    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

  <!-- how many pizzas -->
  <div class="form-group">
    <label>How many pizzas</label>
    <div class="form-control">
      <label class="radio-inline">
        <input type="radio" name="pizzas" value="male">1</label>
      <label class="radio-inline">
        <input type="radio" name="pizzas" value="female">2</label>
      <label class="radio-inline">
        <input type="radio" name="pizzas" value="female">3</label>
    </div>
  </div>

  <!-- where did you hear about us -->
  <div class="form-group">
    <label>Where did you hear about us</label>
    <div class="form-control">
      <label>
        <input type="radio" name="referral" value="male">The internet</label>
      <label>
        <input type="radio" name="referral" value="female">From a friend</label>
      <label>
        <input type="radio" name="referral" value="female">Other</label>
    </div>
  </div>

  <!-- send me updates -->
  <div class="form-group">
    <div class="checkbox">
      <input type="checkbox">Send me updates</div>
  </div>

  <!-- submit -->
  <div class="form-group">
    <button type="submit" class="btn">Submit</button>
  </div>
</form>

Answer 2

所以你的标记无效，无法遵循，所以让我们重新开始并帮助你。

您希望表单中的元素采用表格形式排列，因此请使用表格。 1个电话号码有3个输入，为什么不只使用1？

这是一个表单，因此我们需要一个表单标记：

<form>
</form>

在表格中添加一个包含2行的表格。

<form>
    <table>
        <tr></tr>
        <tr></tr>
    </table>
</form>

现在让我们把字段放在表格中。

<form>
    <table>
        <tr>
            <td>Phone</td>
            <td colspan="2"><input type="text"></td>
        </tr>
        <tr>
            <td>Preferred Contact</td>
            <td>Phone <input type="radio" name="preferred"></td>
            <td>Email <input type="radio" name="preferred"></td>
        </tr>
    </table>
</form>

codepen

我强烈建议您阅读：W3Schools Forms，W3Schools Tables。

Answer 3

@christian我得到了你的观点

我认为这个会有所帮助

在html中创建表单并使用css以下列方式设置样式... 使用标签在文本框旁边写下名称喜欢：用户名

现在设置样式并尝试通过以下列方式定位标签和输入来将其排列在css中：

标签{ 保证金：5px 15px; 无论你想要什么样的风格 } 输入 { 保证金：5px 0px 10px 150px; 提示.... 150px将推动所有文本框在150px的页面上启动，以便通过将左边距更改为您想要的任何内容，将其放置在页面上的任何位置150px }

将混合表单输入类型与CSS对齐

3 个答案:

我认为这个会有所帮助