Struggling to align radio buttons correctly within the form. The goal is to have them match the alignment of the other text boxes in the form

Question

Struggling to align radio buttons correctly within the form. The goal is to have them match the alignment of the other text boxes in the form

I have been struggling with aligning radio buttons to match the alignment of the form's text boxes.

I've experimented with various solutions recommended on this site, as well as others and YouTube. However, the most helpful resource I found was:

How to Align Form Elements

html {background-color: off #f3f3f3;}
        fieldset {background-color: rgb(181, 221, 230); width: 700px;}

        #submit {width: 100px; margin-left: 300px; margin-bottom: 20px;}

        #comments {margin-top: 0.8rem; height: 100px;}

        label {display: inline-block; text-align: right; width: 150px; margin: 0.8rem;}

        input[type="radio"] {margin-left: 190px;}

        .required-field::after {content: "*"; color: red;}

        .select {text-align: justify; margin-left: 0px;}

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">

            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="style.css"/>
            <title>Car Race Signup Sheet</title>
        </head>
        <body>
            <h1>Car Race Signup Sheet</h1>
            <p>Note: MANDATORY FIELD = *</p>
            <form>
                <fieldset>
                    <div class="required-field">
                        <label for="selectevent">* Select Event</label>
                        <input type="radio" id="Stock" name="* Select Event" value="Stock">
                            <label for="Stock">Stock</label><br>
                        <input type="radio" id="Modified" name="* Select Event" value="Modified">
                            <label for="Modified">Modified</label><br>
                        <label for="lastname">*Last Name</label>
                            <input type="text" name="lastname"><br>
                    <!-- more form elements here -->
                </fieldset>
            </form>
        </body>
        </html>

html css radio-button alignment

Answer 1

Answer №1

If I were you, I would consider restructuring it.

Here is a starting point:

html {
  background-color: off #f3f3f3;
}

fieldset {
  background-color: rgb(181, 221, 230);
  width: 700px;
}

#submit {
  width: 100px;
  margin-left: 300px;
  margin-bottom: 20px;
}

#comments {
  margin-top: 0.8rem;
  height: 100px;
}

label {
  display: inline-block;
  width: auto;
  margin: 0.8rem;
}

input[type="radio"] {
  margin-left: 100px;
}

.required-field {
  display: flex;
  flex-direction: column;
}

.required-field::after {
  content: "*";
  color: red;
}

.select {
  text-align: justify;
  margin-left: 0px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
  <title>Car Race Signup Sheet</title>
</head>

<body>
  <h1>Car Race Signup Sheet</h1>
  <p>Note: MANDATORY FIELD = *</p>
  <form>
    <fieldset>
      <div class="required-field">
        <label for="selectevent">* Select Event</label>
        <!-- <div class="select"> -->
        <div>
          <input type="radio" id="Stock" name="* Select Event" value="Stock">
          <label for="Stock">Stock</label>
        </div>
        <div>
          <input type="radio" id="Modified" name="* Select Event" value="Modified">
          <label for="Modified">Modified</label>
        </div>
        <div>
          <label for="lastname">*Last Name</label>
          <input type="text" name="lastname"><br>
        </div>
        <div>
          <label for="firstname">*First Name</label>
          <input type="text" name="firstname"><br>
        </div>
        ... and more
    </fieldset>
  </form>
</body>

</html>

The current structure seems somewhat outdated. It may be worth exploring modern techniques like flexbox for this layout. You can find more information about flexbox here.

Answer 2

If I were you, I would consider restructuring it.

Here is a starting point:

html {
  background-color: off #f3f3f3;
}

fieldset {
  background-color: rgb(181, 221, 230);
  width: 700px;
}

#submit {
  width: 100px;
  margin-left: 300px;
  margin-bottom: 20px;
}

#comments {
  margin-top: 0.8rem;
  height: 100px;
}

label {
  display: inline-block;
  width: auto;
  margin: 0.8rem;
}

input[type="radio"] {
  margin-left: 100px;
}

.required-field {
  display: flex;
  flex-direction: column;
}

.required-field::after {
  content: "*";
  color: red;
}

.select {
  text-align: justify;
  margin-left: 0px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
  <title>Car Race Signup Sheet</title>
</head>

<body>
  <h1>Car Race Signup Sheet</h1>
  <p>Note: MANDATORY FIELD = *</p>
  <form>
    <fieldset>
      <div class="required-field">
        <label for="selectevent">* Select Event</label>
        <!-- <div class="select"> -->
        <div>
          <input type="radio" id="Stock" name="* Select Event" value="Stock">
          <label for="Stock">Stock</label>
        </div>
        <div>
          <input type="radio" id="Modified" name="* Select Event" value="Modified">
          <label for="Modified">Modified</label>
        </div>
        <div>
          <label for="lastname">*Last Name</label>
          <input type="text" name="lastname"><br>
        </div>
        <div>
          <label for="firstname">*First Name</label>
          <input type="text" name="firstname"><br>
        </div>
        ... and more
    </fieldset>
  </form>
</body>

</html>

The current structure seems somewhat outdated. It may be worth exploring modern techniques like flexbox for this layout. You can find more information about flexbox here.

Answer 3

Answer №2

<form>
    <fieldset>  
        <div class="required-field">
        <label for="selectevent">* Select Event</label>
        <input type="radio" id="Stock" name="* Select Event"
        value="Stock">
        <label for="Stock">Stock</label><br>
        <label></label>
        <input type="radio" id="Modified" name="* Select Event" value="Modified">
        <label for="Modified">Modified</label><br>
        <label for="lastname">*Last Name</label>
        <input type="text" name="lastname"><br>
        <label for="firstname">*First Name</label>
        <input type="text" name="firstname"><br>
        <label for="address">*Address</label>
        <input type="text" name="address"><br>
        <label for="city">*City</label>
        <input type="text" name="city"><br>
        <label for="Province">*Province</label>
        <select name="Province">
            <option value="---">---</option>
            <option value="AB">AB</option>
            <option value="BC">BC</option>
        </select><br>    
        <label for="postalcode">*Postal Code/Zip Code</label>
        <input type="text" name="postalcode"><br>
        <label for="country">*Country</label>
        <input type="text" name="country"><br>
        <label for="email">*Email</label>
        <input type="email" name="email"><br> 
        <label for="dateofbirth">*Date of Birth</label>    
        <input type="date" name="dateofbirth"><br>

        <label for="gender">* Gender</label>
        <input type="radio" id="Male" name="* Gender"
        value="Male">
        <label for="Male">Male</label><br>
        <label></label>
        <input type="radio" id="Female" name="* Gender"
        value="Female">
        <label for="Female">Female</label><br>
        <label></label>
        <input type="radio" id="Other" name="* Gender"
        value="Other">
        <label for="Other">Other</label><br>

        <label for="carmake">*Car Make</label>
        <input type="text" name="carmake"><br>
        <label for="comments">Comments</label>
        <input type="comments" name="comments" id="comments"><br>
        <label for="agree">*I agree to the waiver</label>
        <input type="checkbox" name="checkbox">
        <label for="yes">Yes</label><br>
        <input type="submit" name="Submit" id="submit">   
    </fieldset>
</form>

and remove

<pre>input[type="radio"] {margin-left: 190px;}

Answer 4

<form>
    <fieldset>  
        <div class="required-field">
        <label for="selectevent">* Select Event</label>
        <input type="radio" id="Stock" name="* Select Event"
        value="Stock">
        <label for="Stock">Stock</label><br>
        <label></label>
        <input type="radio" id="Modified" name="* Select Event" value="Modified">
        <label for="Modified">Modified</label><br>
        <label for="lastname">*Last Name</label>
        <input type="text" name="lastname"><br>
        <label for="firstname">*First Name</label>
        <input type="text" name="firstname"><br>
        <label for="address">*Address</label>
        <input type="text" name="address"><br>
        <label for="city">*City</label>
        <input type="text" name="city"><br>
        <label for="Province">*Province</label>
        <select name="Province">
            <option value="---">---</option>
            <option value="AB">AB</option>
            <option value="BC">BC</option>
        </select><br>    
        <label for="postalcode">*Postal Code/Zip Code</label>
        <input type="text" name="postalcode"><br>
        <label for="country">*Country</label>
        <input type="text" name="country"><br>
        <label for="email">*Email</label>
        <input type="email" name="email"><br> 
        <label for="dateofbirth">*Date of Birth</label>    
        <input type="date" name="dateofbirth"><br>

        <label for="gender">* Gender</label>
        <input type="radio" id="Male" name="* Gender"
        value="Male">
        <label for="Male">Male</label><br>
        <label></label>
        <input type="radio" id="Female" name="* Gender"
        value="Female">
        <label for="Female">Female</label><br>
        <label></label>
        <input type="radio" id="Other" name="* Gender"
        value="Other">
        <label for="Other">Other</label><br>

        <label for="carmake">*Car Make</label>
        <input type="text" name="carmake"><br>
        <label for="comments">Comments</label>
        <input type="comments" name="comments" id="comments"><br>
        <label for="agree">*I agree to the waiver</label>
        <input type="checkbox" name="checkbox">
        <label for="yes">Yes</label><br>
        <input type="submit" name="Submit" id="submit">   
    </fieldset>
</form>

and remove

<pre>input[type="radio"] {margin-left: 190px;}

Struggling to align radio buttons correctly within the form. The goal is to have them match the alignment of the other text boxes in the form

Answer №1

Answer №2

Similar questions

What is causing the lack of response in the select box on Mac Chrome when I try to click on it?

Tips for ensuring a flexbox stays within the bounds of its container and doesn't exceed the available space

What is the best way to remove the background from a button that uses -moz

Navigating through pages can result in Ruby Locales becoming misplaced

Using Jquery to determine if a div is empty, excluding any content before or after it

What is the process for transferring data (BLOB datatype) to a different table?

Is it possible to consolidate three footer widget areas into just one for WordPress?

Switching between different CSS files based on the URL using jQuery or another method

Utilizing ionic-scroll for seamless movement and scrolling of a canvas element

template not being loaded with form

Converting from CAPS lock to using the capitalize property in CSS

navigating through a specific section of a data chart

Errors persist with PHP form submission despite all fields being filled out

Switch the displayed image(s) based on the radio button selection made by the user

Tips for properly formatting a fixed table header

Disallowing selection on input text field

Most effective method for displaying 100 images on a single page?

The stunning fade effect of Magnific Popup enhances the visual appeal of the inline gallery

Create automatic transcripts for videos, including subtitles and captions

Is there a way to customize the background color of Material-UI MenuItem when hovering over it through AutoComplete props?