0

I am attempting to have my form input text boxes all line up. However, they are unaligned and I have been unable to solve this. What should I do?

Screenshot

body{
    background-color: rgb(134, 210, 221)
}

.event{
    display: inline;
    float: left;
    clear: both;
}

.radio1{
    display: inline;
    float: left;
}

.radio2{
    float: left;
}

.gender{
    display: block;
    float: left;
    clear: both;
}

.required{
    color: red;
}

p{
    clear: both;
    
}

label{
    display: block;
    float: left;
}
#date{
    float: left;
}

.submit{
    text-align: center;
}

input{
    display: inline-block;
    margin-left: 10px;
    clear: both;
}
<body>

<form>
    <p class="event"><span class="required">*</span>Select Event:</p> 
    <div class="radio1">
    <p><input type="radio" id="stock">Stock</p>
    <p><input type="radio" id="modified">Modified</p>
    </div>
   
        <p><span class="required">*</span>Last Name: <input type="text" name="lastname" id="lastname" />
        </p>
        <p><span class="required">*</span>First Name: <input type="text" name="firstname" id="firstname"></p>
        <p><span class="required">*</span>Address: <input type="text" name="address" id="address"></p>
        <p><span class="required">*</span>City: <input type="text" name="city" id="city"></p>

        <p><span class="required">*</span>Province: <select name="selectprovince" id="selectprovince">Select Province
        <option value="provinces">...</option>
        <option value="provinces">AB</option>
        <option value="provinces">BC</option>
        <option value="provinces">MB</option>
        <option value="provinces">NB</option>
        <option value="provinces">NL</option>
        <option value="provinces">NT</option>
        <option value="provinces">NS</option>
        <option value="provinces">NU</option>
        <option value="provinces">ON</option>
        <option value="provinces">PE</option>
        <option value="provinces">QC</option>
        <option value="provinces">SK</option>
        <option value="provinces">YT</option>
</select></p>

<p><span class="required">*</span>Postal/Zip Code: <input type="text" name="postal" id="postal"></p>
<p><span class="required">*</span>Country: <input type="text" name="country" id="country"></p>
<p><span class="required">*</span>Email: <input type="text" name="country" id="country"></p>

<label for="date"><span class="required">*</span>Date of Birth</label>
<input type="date" name="date" id="date">


<p class="gender"><span class="required">*</span>Gender: </p> 
<div class="radio2">
<p><input type="radio">Male</p>
<p><input type="radio">Female</p>
<p><input type="radio">Other</p>
</div>

<div class="bottom">
<p><span class="required">*</span>Boat Name: <input type="text" name="boat" id="boat"></p>

<p class="comments">Comments <textarea name="comments" form="form" id="comments" rows="7" cols="20"></textarea></p>
</div>

<p><span class="required">*</span>I agree to the waiver <input type="checkbox"> Yes </p>
<div class="submit">
<input type="submit" id="submit">
</div>
</form>
      
</select>
misterManSam
  • 24,303
  • 11
  • 69
  • 89
gl1tch
  • 9
  • 1

1 Answers1

1

HTML structure is very important to understand and to learn how it works and how to put elements together. If you have a good HTML structure, it will be easy to edit and style.

One of your mistakes is that you put the input inside the p. So what you should do is put each row (elements group) in a container with flex display. and put them separated properly in a good structure. then give all elements on the left, the same width to align all right elements properly in a vertical line.

here I did that for the first three groups in your code. you can follow the same steps to do for the rest.

body{
    background-color: rgb(134, 210, 221)
}

.container {
    border: 1px solid red;
    height: fit-content;
    display: flex;
    min-width: fit-content;
    align-items: center;
}

.left {
    display: flex;
    flex-direction: row;
    width: 100px;
    /* height: 10px; */
    border: 1px solid;
    position: relative;
    margin-right: 5px;
}

.right {
    border: 1px solid blue;
    width: 400px;
}

select {
    display: flex;
}

.event{
    /* display: inline;
    float: left;
    clear: both; */
}

.radio1{
    /* display: inline;
    float: left; */
}

.radio2{
    /* float: left; */
}

.gender{
    /* display: block;
    float: left;
    clear: both; */
}

.required{
    color: red;
}

p{
    /* clear: both; */
    
}

label{
    /* display: block;
    float: left; */
}
#date{
    /* float: left; */
}

.submit{
    text-align: center;
}

input{
    /* display: inline-block;
    margin-left: 10px;
    clear: both; */
}
    
    <form>
      <div class="container">
        <p class="event left"><span class="required">*</span>Select Event:</p> 
       <div class="radio1 right">
          <p><input type="radio" id="stock">Stock</p>
          <p><input type="radio" id="modified">Modified</p>
       </div>
      </div>
       
      <div class="container">
        <p class="left">
          <span class="required">*</span>
          Last Name: 
        </p>
        <input class="right" type="text" name="lastname" id="lastname"/>
      </div>
         
      <div class="container">
        <p class="left">
          <span class="required">*</span>
          First Name: 
        </p>
        <input class="right" type="text" name="firstname" id="firstname">
      </div>
         
          <p class="left">
            <span class="required">*</span>
            Address: 
            <input class="right" type="text" name="address" id="address"></p>
          <p class="left">
            <span class="required">*</span>
            City: 
            <input class="right" type="text" name="city" id="city"></p>
  
          <p class="left"><span class="required">*</span>
            Province: 
            <select class="right" name="selectprovince" id="selectprovince">Select Province
              <option value="provinces">...</option>
              <option value="provinces">AB</option>
              <option value="provinces">BC</option>
              <option value="provinces">MB</option>
              <option value="provinces">NB</option>
              <option value="provinces">NL</option>
              <option value="provinces">NT</option>
              <option value="provinces">NS</option>
              <option value="provinces">NU</option>
              <option value="provinces">ON</option>
              <option value="provinces">PE</option>
              <option value="provinces">QC</option>
              <option value="provinces">SK</option>
              <option value="provinces">YT</option>
            </select>
          </p>
    <select>
    <p><span class="required">*</span>Postal/Zip Code: <input type="text" name="postal" id="postal"></p>
    <p><span class="required">*</span>Country: <input type="text" name="country" id="country"></p>
    <p><span class="required">*</span>Email: <input type="text" name="country" id="country"></p>
    
    <label for="date"><span class="required">*</span>Date of Birth</label>
    <input type="date" name="date" id="date">
    
    
    <p class="gender"><span class="required">*</span>Gender: </p> 
    <div class="radio2">
      <p><input type="radio">Male</p>
      <p><input type="radio">Female</p>
      <p><input type="radio">Other</p>
    </div>
    
    <div class="bottom">
      <p><span class="required">*</span>Boat Name: <input type="text" name="boat" id="boat"></p>
      
      <p class="comments">Comments <textarea name="comments" form="form" id="comments" rows="7" cols="20"></textarea></p>
    </div>
    
    <p><span class="required">*</span>I agree to the waiver <input type="checkbox"> Yes </p>
    <div class="submit">
      <input type="submit" id="submit">
    </div>
    </form>
Mad7Dragon
  • 1,237
  • 1
  • 10
  • 21