Align right side of a group of labels

Question

I'm making an HTML page with a list of fields for filling out billing info. Since the labels are in-line, their width is determined by the text contained in them, thus making them different widths which makes the input boxes unaligned. This makes a very ugly, unorganized look.

<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>

What do I need to do to my HTML code to align the right side of the labels and the left side of the input boxes?

Answer 1

You can use tables or use display: table-row & display: table-cell css to simulate table cell layouts as following:

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;}

<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>

Answer 2

Use table structure for your lists of fields for proper alignment.

    <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>

Answer 3

You will find it much easier if you put your elements into suitable containers and use CSS to do the hard work.

<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>

Here the label does 3 jobs:

• It creates a clickable text to activate your input box.
• It makes the purpose of the text clear for screen readers and other software.
• You can easily apply CSS to the element.

The label element can either be wrapped around the input element:

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

or attached with the for attribute. The for attribute references an id, which is independent of the name attribute. As you see in the example, they are often set to the same value.

In the CSS, we set the width to something reasonable. However, the label needs to be displayed as an inline-block for the width to take effect.

Answer 4

Use flexbox to fix your problem. Wrap the container fieldset using display: flex, Set the flex-direction as column. Wrap the children inside a div and set the flex-grow property for the span element as 1.

Using flexbox will take care of responsiveness.

Refer CSS Flexbox

fieldset {
  display: flex;
  flex-direction: column;
}

div {
  display: flex;
  margin: 10px;
}

span {
  flex: 1;
}

<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>