Question

我有一个快速的HTML / CSS问题，希望有人可以帮助我！

我正在尝试在线课程中学习CSS的细节。我试图在表格中的字段集内的表单中与CSS进行非常具体的对齐。我需要在中间分割一个字段集，并在左侧直接使用标签，并在右侧直接输入表单。我上传了2张图片：到目前为止我所拥有的内容以及我希望得到的内容，以便对我想要实现的内容进行可视化。

对于精通CSS的人来说，我确信这很容易，但这让我很困惑。只是希望得到一些方向！

我拥有的： http://imgur.com/gKoWux7

我想得到什么： http://imgur.com/IfeK8D1

忽略第一张图片中的重复代码/名称，我只是担心标签，输入和按钮的对齐。

这是我的HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Test 2</title>
        <link rel="stylesheet" type="text/css" href="test2.css">
    </head>
    <body>
        <form>
            <fieldset>
                <legend>Personal Information</legend>
                <table>
                    <tr>
                        <td><label>First Name:</label></td>
                        <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td><label>First Name:</label></td>
                        <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td><label>First Name:</label></td>
                        <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td><label>First Name:</label></td>
                        <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td><label>First Name:</label></td>
                        <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td><label>First Name:</label></td>
                        <td><input type="text"></td>
                    </tr>
                </table>
            </fieldset>

            <fieldset>
                <legend>Registration Information</legend>
                <table>
                   <tr>
                        <td><label>First Name:</label></td>
                        <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td><label>First Name:</label></td>
                        <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td><label>First Name:</label></td>
                        <td><input type="text"></td>
                    </tr>
                </table>
            </fieldset>

            <fieldset>
            <legend>Submit Your Registration</legend>
                <table>
                    <tr>
                        <td><input type="submit"></td>
                        <td><input type="reset"></td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </body>
</html>

这是我的CSS：

body {
    background-color: #A8F89C;
    margin: auto;
    width: 50%;
}

table {
    width: 400px;
    table-layout: fixed; 
}

fieldset {
    width: 410px;
    margin: auto;
    width: 50%;
}

legend {
    font-size: 16px;
    font-weight: bold;
}

label {
    font-size: 14px;
    color: #06127D;
}

td label {
    font-weight: bold;
    padding-right: 7px;
}

td input {
    padding-left: 7px;
}

form input {
    width: 140px;
}

label input[type="radio"] {
    font-size: 14px;
    color: #201E1C;
}

button {
    width: 75px;
    font-weight: bold;
    background-color: rgb(28,67,14);
}

非常感谢你的帮助!!!

Answer 1

我刚刚已经阅读了你想要的内容。

您可以使用下面提到的css来获得此图像的布局 http://imgur.com/IfeK8D1

<style>
fieldset,table{
   width:100%
}
td{
   width:50%;
}
tbody tr td:first-child{
   text-align:right;
   padding-right:20px;
}

我希望它可以根据您的需要为您提供帮助。

由于

Answer 2

我的想法是将这个CSS添加到（因为标签不填充td的整个宽度，因为标签不是块级元素）

td label{
    width:100%;
    display: inline-block;
    text-align:right;
}

或者如果您愿意，也可以这样，添加

td {
    text-align: right
}

但它将所有td元素移动到右边。

Answer 3

下面的代码段

如果需要，取出边框

＆＃13;

body {
  background-color: #A8F89C;
  margin: auto;
}

table {
  table-layout: fixed;
}

fieldset {
  width: 410px;
  margin: auto;
  text-align: center;
}

legend {
  font-size: 16px;
  font-weight: bold;
}

label {
  font-size: 14px;
  color: #06127D;
}

td label {
  font-weight: bold;
  padding-right: 7px;
}

td input {
  padding-left: 7px;
}

form input {
  width: 140px;
}

label input[type="radio"] {
  font-size: 14px;
  color: #201E1C;
}

button {
  width: 75px;
  font-weight: bold;
  background-color: rgb(28, 67, 14);
}

table {
  border: solid red;
  display: inline-table;
}

fieldset {
  border: solid blue;
}

td:nth-child(1) {
  text-align: right
}

＆＃13;

<!DOCTYPE html>
<html>


<head>
  <title>Test 2</title>
  <link rel="stylesheet" type="text/css" href="test2.css">

</head>



<body>

  <form>
    <fieldset>

      <legend>Personal Information</legend>
      <table>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
      </table>
    </fieldset>
    <fieldset>

      <legend>Registration Information</legend>
      <table>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
      </table>

    </fieldset>
    <fieldset>

      <legend>Submit Your Registration</legend>
      <table>
        <tr>
          <td>
            <input type="submit">
          </td>
          <td>
            <input type="reset">
          </td>
        </tr>
      </table>
    </fieldset>
  </form>

</body>


</html>

＆＃13;

Answer 4

首先使用div可能更容易使用..我修改了你的html，我摆脱了tr和td并使用div。希望这个帮助

<div align = "center"> <label>First Name:</label> <input type="text"> </div>

需要将表格置于表单内的字段集中

4 个答案: