Question

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

label {
display:inline-block;
}

我还将我的容器变成了一个弹性箱，将其设置为行，并试图将标签向左浮动，但两者都没有工作。

我相信必须有一种直截了当的方法来做到这一点，如果你知道如何，我将非常感谢你的帮助。谢谢。

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

<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

＆＃13;

/* 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; } 
}

＆＃13;

<!-- 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>

＆＃13;

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

1 个答案:

jsFiddle