html - 将表单标签对齐到输入的左侧

Question

我试图在媒体查询中将我的标签移动到左侧而不是上方以获得更大的屏幕尺寸。我试过:

label {
display:inline-block;
}

我也将我的容器变成了一个 flexbox，将其设置为行，并尝试将标签向左浮动，但都没有用。

我相信一定有一种直接的方法可以做到这一点，如果您知道如何做，我将不胜感激。谢谢。

下面是我的代码的一部分。

<div class="container">
  <div id="contact-information">
    <h2>Contact Information</h2>
    <form action="" method="post">
      <fieldset input style="border:none">
        <div>
          <label for="email">Email Address:</label>
          <br>
          <input type="email" id="email" name="user_email-address" value="" placeholder="Required">
        </div>
        <div>
          <label for="home-number">Home Phone Number:</label>
          <br>
          <input type="tel" id="home-number" name="user_homeNumber" value="">
        </div>
        <div>
          <label for="mobile-number">Mobile Phone Number:</label>
          <br>
          <input type="tel" id="mobile-number" name="user_mobileNumber" value="">
        </div>
    </form>

Answer 1

/* establish flex container */
form > fieldset > div {
    display: flex;                                      
    margin-bottom: 5px;
}

/* set length of label */
form > fieldset > div > label {
    flex: 0 0 200px;
}

/* tell input to take all remaining width */
form > fieldset > div > input {
    flex: 1;
}

/* media query for smaller screens */
@media ( max-width: 800px ) {

    /* label and input stack vertically */
    form > fieldset > div { flex-direction: column; } 

    /* label takes height based on content */
    form > fieldset > div > label { flex: 0 0 auto; } 
}

<!-- I removed the <br> tags and added </fieldset> to properly close the element -->
<div class="container">
  <div id="contact-information">
    <h2>Contact Information</h2>
    <form action="" method="post">
      <fieldset input style="border:none">
        <div>
          <label for="email">Email Address:</label>
          <input type="email" id="email" name="user_email-address" value="" placeholder="Required">
        </div>
        <div>
          <label for="home-number">Home Phone Number:</label>
          <input type="tel" id="home-number" name="user_homeNumber" value="">
        </div>
        <div>
          <label for="mobile-number">Mobile Phone Number:</label>
          <input type="tel" id="mobile-number" name="user_mobileNumber" value="">
        </div>
      </fieldset>
    </form>
  </div>

jsFiddle