单选按钮距离太远

Question

我目前正在创建一个网站，而且我正在创建一个表单，允许用户输入他们的姓名，电子邮件，性别和出生日期。我的问题是我使用标签=＆＃34;＆＃34; 允许css让每个部分与上面的部分对齐

<form>
    <table>
        <tr>
            <td><label for="Email">Please enter e-mail:</label></td>
            <td><input id="email" type="text" name="email" title="email address" align="right" size="40"/></td>
        </tr>
        <tr>
            <td><label for="Name">Please enter your full name:</label></td>
            <td><input id="name" type="text" name="name" title="name" align="right" size="40"/></td>
        </tr>
        <tr>
            <td><label for="DOB">Please enter your date of birth</label></td>
            <td><input id="DOB" type="date" name="DOB" title="DOB" align="right"/></td>
        </tr>
        <tr>
            <td><label for="gender">Please select your gender</label></td>
            <td><input id="male" type="radio" name="male" title="male"/>Male<td><input id="female" type="radio" name="female" title="female"/>Female</td>
        </tr>
        <tr>
            <td>
                <label for="submit"><input type ="submit" value="Submit"></label>
            </td>
        </tr>
    </table>
</form>

我的css是：

label {
    margin-left:400px;
}

但我的收音机按钮此刻相距太远，我似乎无法让它们靠得更近。可以在此图像中看到单选按钮

如果图片没有显示，您可以在此处查看：http://www.howilearn2.com/student/NonStudentIndex.html

Answer 1

您当前正在使用<table>来处理此格式，但是您的一个单选按钮位于第三列（而不是使用其他单选按钮位于第二列）。

尝试将它们放在同一个<td>元素中：

<td>
    <input id="male" type="radio" name="male" title="male"/>Male
    <input id="female" type="radio" name="female" title="female"/>Female
</td>

你可以see an example of this here并在下面演示：

Answer 2

您将单选按钮放在单独的td中，将女性按钮放在第三列中，即放在所有其他字段的右侧。您可以使用colspans摆弄，也可以只将两个单选按钮放在同一个单元格中。

两个有点无关的笔记：

• 考虑使用div元素和css而不是表格来进行表单布局。
• 考虑第三个性别选项，为more inclusive。

Answer 3

我看到你选择了答案，但我想提供一个替代答案。它可能看起来更复杂，但我向你保证，从长远来看它会有所帮助：

概述：我建议使用CSS代替HTML来更好地separation内容和设计。

解释：今天关注responsiveness（即处理不同的屏幕尺寸），表格很麻烦。移动设备现在是一个大问题，桌子通常会强制一定宽度，这可能是这些设备的较小屏幕上的问题。此外，如果您想更改设计，您可能需要修改HTML或在CSS中添加许多特定于表的内容以覆盖所有浏览器中的所有默认表样式。如果HTML在模板之类的东西中重复使用，这可能会成为一个问题。

我们现在有这些令人敬畏的东西，称为媒体查询，可帮助我们根据屏幕大小动态更改样式。当遵循“移动优先”方法时，首先开始设计小屏幕，然后可以使用媒体查询扩展内容以适应更大的屏幕。如果您在CSS中定义了“表”，则可以轻松更改它。 （例如：从垂直列表开始并更改为某些屏幕宽度以上的表格）

示例响应式解决方案* ：

（运行代码段后，调整浏览器窗口大小以查看效果）

/* Mobile (notice you can make this something other than a table) */
.container {
  box-sizing: border-box;
  width: 100%;
  margin: 0px auto;
  padding: 0px 25px;
}
.input-group:first-child, .input-submit:first-child {
  margin-top: 0px;
}
.input-group, .input-submit {
  margin-top: 25px;
}
.input-submit {
  display: inline-block;
}

/* Larger-than-mobile */
@media (min-width : 768px) {
  .container { width: 758px; padding: 0px; }
  .form {
    display: table;
    border-spacing: 0px;
    border-collapse: collapse;
  }
  .input-group {
    margin: 0px;
    display: table-row;
  }
  .input-label, .input-wrapper {
    display: table-cell;
    vertical-align: bottom;
    
    /* invisible border between "cells" to space them out */
    border: 15px solid transparent;
  }

  /* Remove outer borders (if you want, you can remove this) */
  .form .input-group:first-child > * {
    border-top: 0;
  }
  .form .input-group:last-child > * {
    border-bottom: 0;
  }
  .form .input-group > *:first-child {
    border-left: 0;
  }
  .form .input-group > *:last-child {
    border-right: 0;
  }
}

<div class="container">
  <form class="form">
    <div class="input-group">
      <label class="input-label" for="Email">Please enter e-mail:</label>
      <div class="input-wrapper">
        <input id="email" type="text" name="email" title="email address" align="right" size="40" />
      </div>
    </div>
    <div class="input-group">
      <label class="input-label" for="Name">Please enter your full name:</label>
      <div class="input-wrapper">
        <input id="name" type="text" name="name" title="name" align="right" size="40"/>
      </div>
    </div>
    <div class="input-group">
      <label class="input-label" for="DOB">Please enter your date of birth:</label>
      <div class="input-wrapper">
        <input id="DOB" type="date" name="DOB" title="DOB" align="right"/>
      </div>
    </div>
    <div class="input-group">
      <label class="input-label" for="gender">Please select your gender:</label>
      <div class="input-wrapper">
        <input id="male" type="radio" name="male" title="male"/>Male
        <input id="female" type="radio" name="female" title="female"/>Female
      </div>
    </div>
    <label class="input-submit" for="submit"><input type="submit" value="Submit"></label>
  </form>
</div>

*类名等很大程度上基于bootstrap