How do I get the form labels so they are in-line and right justified, against the form elements-CodePudding

For the life of me I can't get my labels to be in-lin and right justified against form elements, rather I am getting this

section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 960px;
    margin: 0 auto;
}

.feedback_right {
    display: flex;
    flex-direction: row;
    flex: 1;
}

/* Contact Form Styling */

form#contact_form {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: auto;
}

form#contact_form p {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0;
}

form#contact_form p > label {
    display: inline-block;
    padding-right: 2px;
    text-align: right;
}


form#contact_form p > input {
    font-family: monospace;
    font-size: 1em;
}

button {
    display: inline-block;
    width: 25%;
    margin: 0 0 0 auto;
    margin-bottom: 5px;
}

<section>
  <div class="feedback_right">
        <form id="contact_form">
                <p>
                    <label for="contact_name">Full Name:</label>
                    <input type="text" id="contact_name" name="contact_name" placeholder="Name">
                </p>
                <p>
                    <label for="contact_email">Email Address:</label>
                    <input type="email" id="contact_email" name="contact_email" placeholder="Email">
                </p>
                <p>
                    <label for="contact_number">Mobile Number:</label>
                    <input type="tel" id="contact_number" name="contact_number" placeholder="Mobile Number">
                </p>
                <p>
                    <label for="victoria">Victoria</label>
                    <input type="radio" id="victoria" name="victoria">
                </p>
                <p>
                    <label for="queensland">Queensland</label>
                    <input type="radio" id="queensland" name="queensland">
                </p>
                <p>
                    <label for="new_south_wales">New South Wales</label>
                    <input type="radio" id="new_south_wales" name="new_south_wales">
                </p>
                <p>
                    <label for="act">Australian Capital Territory</label>
                    <input type="radio" id="act" name="act">
                </p>
                <p>
                    <label for="tasmania">Tasmania</label>
                    <input type="radio" id="tasmania" name="tasmania">
                </p>
                <p>
                    <label for="south_australia">South Australia</label>
                    <input type="radio" id="south_australia" name="south_australia">
                </p>
                <p>
                    <label for="western_australia">Western Australia</label>
                    <input type="radio" id="western_australia" name="western_australia">
                </p>
                <p>
                    <label for="northern_territory">Northern Territory</label>
                    <input type="radio" id="northern_territory" name="northern_territory">
                </p>
                <p>
                    <label for="contact_message">Message:</label>
                  <textarea rows="4" cols="40" id="contact_message" name="contact_message" placeholder="Message"></textarea> 
                </p>
                    <button type="submit">Submit</button>
              </form>
          </div>
    </section>

I want the submit button to stay exactly where it is, I just need some assistance in troubleshooting and getting the labels right align against the input elements that are all nicely aligned.

My desired outcome would be something similar to this - just without that vertical divider line.

CodePudding user response：

It shouldn't be really hard to do, if you are not just a backend dev with little knowledge of css. Just float them right!!!, and then play around with the max-width of the whole form as you like.

I have shown #3 method to right justify the label items, there are plenty of ways to do that though.

section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 960px;
    margin: 0 auto;
}

.feedback_right {
    display: flex;
    flex-direction: row;
    flex: 1;
}

/* Contact Form Styling */

form#contact_form {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: auto;
}

form#contact_form p {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0;
}

form#contact_form p > label {
    display: inline-block;
    padding-right: 2px;
    text-align: right;
}


form#contact_form p > input {
    font-family: monospace;
    font-size: 1em;
}

button {
    display: inline-block;
    width: 25%;
    margin: 0 0 0 auto;
    margin-bottom: 5px;
}

/*Why not just float them right??*/ 

label {
  float: right;
}

label[for="contact_message"] {
  float: none;
}

input {
  float: right;
  margin-left: 52px;
}

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

<section>
  <div class="feedback_right">
        <form id="contact_form">
                <p>
                    
                    <input type="text" id="contact_name" name="contact_name" placeholder="Name">
                    <label for="contact_name">Full Name:</label>
                </p>
                <p>
                   
                    <input type="email" id="contact_email" name="contact_email" placeholder="Email">
                     <label for="contact_email">Email Address:</label>
                </p>
                <p>
                   
                    <input type="tel" id="contact_number" name="contact_number" placeholder="Mobile Number">
                     <label for="contact_number">Mobile Number:</label>
                </p>
                <p>
                    
                    <input type="radio" id="victoria" name="victoria">
                    <label for="victoria">Victoria</label>
                </p>
                <p>
                    
                    <input type="radio" id="queensland" name="queensland">
                    <label for="queensland">Queensland</label>
                </p>
                <p>
                    
                    <input type="radio" id="new_south_wales" name="new_south_wales">
                    <label for="new_south_wales">New South Wales</label>
                </p>
                <p>
                   
                    <input type="radio" id="act" name="act">
                     <label for="act">Australian Capital Territory</label>
                </p>
                <p>
                    
                    <input type="radio" id="tasmania" name="tasmania">
                    <label for="tasmania">Tasmania</label>
                </p>
                <p>
                    
                    <input type="radio" id="south_australia" name="south_australia">
                    <label for="south_australia">South Australia</label>
                </p>
               
                <p>
                    <label for="contact_message">Message:</label>
                  <textarea rows="4" cols="40" id="contact_message" name="contact_message" placeholder="Message"></textarea> 
                </p>
                    <button type="submit">Submit</button>
              </form>
          </div>
    </section>

Flexbox approach:

section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 960px;
    margin: 0 auto;
}

.feedback_right {
    display: flex;
    flex-direction: row;
    flex: 1;
}

/* Contact Form Styling */

form#contact_form {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: auto;
}

form#contact_form p {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0;
}

form#contact_form p > label {
    display: inline-block;
    padding-right: 2px;
    text-align: right;
}


form#contact_form p > input {
    font-family: monospace;
    font-size: 1em;
}

button {
    display: inline-block;
    width: 25%;
    margin: 0 0 0 auto;
    margin-bottom: 5px;
}

/*changes*/  

form#contact_form p {
  display: flex;
  justify-content: space-between;
}

form#contact_form p > label {
  flex-basis: 50%;
  margin-right: 40px;
}

<section>
  <div class="feedback_right">
        <form id="contact_form">
                <p>
                    <label for="contact_name">Full Name:</label>
                    <input type="text" id="contact_name" name="contact_name" placeholder="Name">
                </p>
                <p>
                    <label for="contact_email">Email Address:</label>
                    <input type="email" id="contact_email" name="contact_email" placeholder="Email">
                </p>
                <p>
                    <label for="contact_number">Mobile Number:</label>
                    <input type="tel" id="contact_number" name="contact_number" placeholder="Mobile Number">
                </p>
                <p>
                    <label for="victoria">Victoria</label>
                    <input type="radio" id="victoria" name="victoria">
                </p>
                <p>
                    <label for="queensland">Queensland</label>
                    <input type="radio" id="queensland" name="queensland">
                </p>
                <p>
                    <label for="new_south_wales">New South Wales</label>
                    <input type="radio" id="new_south_wales" name="new_south_wales">
                </p>
                <p>
                    <label for="act">Australian Capital Territory</label>
                    <input type="radio" id="act" name="act">
                </p>
                <p>
                    <label for="tasmania">Tasmania</label>
                    <input type="radio" id="tasmania" name="tasmania">
                </p>
                <p>
                    <label for="south_australia">South Australia</label>
                    <input type="radio" id="south_australia" name="south_australia">
                </p>
                <p>
                    <label for="western_australia">Western Australia</label>
                    <input type="radio" id="western_australia" name="western_australia">
                </p>
                <p>
                    <label for="northern_territory">Northern Territory</label>
                    <input type="radio" id="northern_territory" name="northern_territory">
                </p>
                <p>
                    <label for="contact_message">Message:</label>
                  <textarea rows="4" cols="40" id="contact_message" name="contact_message" placeholder="Message"></textarea> 
                </p>
                    <button type="submit">Submit</button>
              </form>
          </div>
    </section>

You can eliminate the last textarea label from flex positioning yourself.