如何获取表单标签，以便它们与表单元素对齐并右对齐

Question

在我的生活中，我无法让我的标签在表单元素中保持内联和右对齐，而是让我得到 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>

我希望提交按钮保持原样，我只需要一些帮助来解决问题并让标签与输入元素正确对齐，这些元素都很好对齐。

我想要的结果类似于 this - 只是没有垂直分隔线。

Answer 1

如果您不只是对 css 知之甚少的后端开发人员，这应该不难。将它们正确浮动！！！，然后随心所欲地调整整个表单的最大宽度。

我已经展示了 #3 方法来右对齐标签项，不过有很多方法可以做到这一点。

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 方法：

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>

您可以自己消除 flex 定位中的最后一个 textarea 标签。

如何获取表单标签，以便它们与表单元素对齐并右对齐

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

html

css

forms

flexbox

alignment