Question

我正在创建一个HTML页面，其中包含用于填写结算信息的字段列表。由于标签是直线的，因此它们的宽度由包含在其中的文本确定，因此使它们具有不同的宽度，这使得输入框不对齐。这使得一个非常丑陋，无组织的外观。

＆＃13;

<fieldset>
    <legend>Billing Information</legend><br>
    Card Number: <input type="text"><br><br>
    Expiration Month: <input type="number"><br><br>
    Expiration Year: <input type="number"><br><br>
    Name on Card: <input type="text"><br><br>
    Address: <input type="text"><br><br>
    City: <input type="text"><br><br>
    State: <input type="text"><br><br>
    Country: <input type="text"><br><br>
    ZIP Code: <input type="number"><br><br>
</fieldset><br>

＆＃13;

我需要对HTML代码执行哪些操作对齐标签的右侧和输入框的左侧？

Answer 1

您可以使用表格或使用display: table-row＆amp; display: table-cell css模拟表格单元格布局如下：

＆＃13;

fieldset {display: inline-block; padding: 10px 20px;} /* 'display: inline-block' is not necessary, just for appearance */

.row {display: table-row; }
.lbl {display: table-cell; text-align:right; padding: 8px 5px;}

＆＃13;

<fieldset>
    <legend>Billing Information</legend>
    
    <div class="row"><span class="lbl">Card Number: </span><input type="text"></div>
    <div class="row"><span class="lbl">Expiration Month: </span><input type="number"></div>
    <div class="row"><span class="lbl">Expiration Year: </span><input type="number"></div>
    <!-- ... /-->
</fieldset><br>

＆＃13;

Answer 2

使用表格结构为您的字段列表进行正确对齐。

＆＃13;

    <fieldset>
        <legend>Billing Information</legend>
        <table>
          <tr><td>Card Number:</td><td><input type="text"></td></tr>
          <tr><td>Expiration Month:</td><td> <input type="number"></td></tr>
          <tr><td>Expiration Year:</td><td> <input type="number"></td></tr>
          <tr><td>Name on Card:</td><td> <input type="text"></td></tr>
          <tr><td>Address:</td><td> <input type="text"></td></tr>
          <tr><td>City:</td><td> <input type="text"></td></tr>
          <tr><td>State:</td><td> <input type="text"></td></tr>
          <tr><td>Country:</td><td> <input type="text"></td></tr>
          <tr><td>ZIP Code:</td><td> <input type="number"></td></tr>
        </table>
    </fieldset>

＆＃13;

Answer 3

如果将元素放入合适的容器并使用CSS进行艰苦的工作，您会发现它更容易。

<style type="text/css">
    label {
        display: inline-block;
        font-weight: bold;
        width: 10em;
    }
</style>
<fieldset>
    <legend>Billing Information</legend><br>
        <p><label for="card-number">Card Number:</label><input type="text" name="card-number" id="card-number"></p>
        <p><label for="expiration-month">Expiration Month:</label><input type="text" name="expiration-month" id="expiration-month"></p>
        <!-- etc -->
</fieldset>

label执行3个工作：

它会创建一个可点击的文字来激活您的输入框。
它使文本的目的明确为屏幕阅读器和其他软件。
您可以轻松地将CSS应用于元素。

label元素可以包含在输入元素周围：

<label>Expiration Month: <input …></label>

或附加for属性。 for属性引用 id ，它是name属性的独立。正如您在示例中看到的那样，它们通常设置为相同的值。

在CSS中，我们将宽度设置为合理的值。但是，label需要显示为inline-block才能使宽度生效。

Answer 4

使用flexbox来解决您的问题。使用fieldset包裹容器display: flex，将flex-direction设置为column。将孩子包裹在div内，并将flex-grow元素的span属性设置为1。

使用flexbox将负责响应。

参考CSS Flexbox

＆＃13;

fieldset {
  display: flex;
  flex-direction: column;
}

div {
  display: flex;
  margin: 10px;
}

span {
  flex: 1;
}

＆＃13;

<fieldset>
  <legend>Billing Information</legend>
  <div><span>Card Number: </span><input type="text"> </div>
  <div><span>Expiration Month:</span> <input type="number"></div>
  <div><span> Expiration Year:</span> <input type="number"></div>
  <div><span>Name on Card:</span> <input type="text"> </div>
  <div><span>Address:</span> <input type="text"> </div>
  <div><span>City:</span> <input type="text"></div>
  <div><span>State: </span><input type="text"></div>
  <div><span>Country:</span> <input type="text"></div>
  <div><span>ZIP Code:</span> <input type="number"></div>
</fieldset>

＆＃13;

对齐一组标签的右侧

4 个答案: