是什么让第一和第二段浮动到左边?

问题描述 投票:0回答:2

#content{
  display:flex;
  justify-content:center;
  height:500px;
  width:100%;
}

#title {
  display:block;
}

      #name {
        display:block;
      }
      #email {
        display:block;
      }
      
      #number {
        display:block;
      }
 <body>
    <div id="content">
      <div id="title"><p>This is a survey form.</p></div>
    <div id="description"><p>It would be nice if you  could fill this information about addiction.</p></div>
    <form id="survey-form">
      <label id="name-label" for="name">Name:</label><input id="name" type="text" name="name" placeholder="Enter your name" required>
      <label id="email-label" for="email">Email:</label>
      <input id="email" type="email" name="email" placeholder="Enter your email">
      <label id="number-label" for="age">Enter your age:</label>
      <input id="number" type="number" name="age" min="18" max="55" placeholder="Enter your age">
      <h4>What are you currently addicted to?</h4>
      <select id="dropdown" name="items">
        <option value="alcohol">Alcohol</option>
        <option value="smoking">Smoking</option>
        <option value="gaming">Gaming</option>
        <option value="other">Other</option>
      </select>
      <p>For how long you've been addited?</p>
      
      <label><input type="radio" name="1month" id="1month"> >1 Month</label>
      <label><input type="radio" name="6months" > >6 Months</label>
      <label><input type="radio" name="12months" > >12 Months</label><br>
      How many people do you know that are addicted as well?
      <input type="checkbox" value="none">None
      <input type="checkbox" value="few">Few (1-5)
      <input type="checkbox" value="tons">A lot (over 5)
      <p>If there's anything else you would like to point out feel free to do it.</p>
      <textarea name="feedback" cols="30" rows="10"></textarea>
      <input id="submit" type="submit" name="submit" value="Submit your information">
      </div>
    </form>
  </body>

是什么让页面上的第一段和第二段显示在左侧? 我已经涵盖了div容器中的所有东西,但是现在你可以看到它由于某种原因漂浮到左侧。 我希望它能像其他东西一样集中。 在这里使用flexbox是不是一个坏选择?

html css
2个回答
0
投票

#content{
  display:grid;
  justify-content:center;
  height:500px;
  width:100%;
}

#title {
  display:block;
}

      #name {
        display:block;
      }
      #email {
        display:block;
      }
      
      #number {
        display:block;
      }
      input#submit{
      display:block;
      }
<body>
    <div id="content">
      <div id="title"><p>This is a survey form.</p></div>
    <div id="description"><p>It would be nice if you  could fill this information about addiction.</p></div>
    <form id="survey-form">
      <label id="name-label" for="name">Name:</label><input id="name" type="text" name="name" placeholder="Enter your name" required>
      <label id="email-label" for="email">Email:</label>
      <input id="email" type="email" name="email" placeholder="Enter your email">
      <label id="number-label" for="age">Enter your age:</label>
      <input id="number" type="number" name="age" min="18" max="55" placeholder="Enter your age">
      <h4>What are you currently addicted to?</h4>
      <select id="dropdown" name="items">
        <option value="alcohol">Alcohol</option>
        <option value="smoking">Smoking</option>
        <option value="gaming">Gaming</option>
        <option value="other">Other</option>
      </select>
      <p>For how long you've been addited?</p>
      
      <label><input type="radio" name="1month" id="1month"> >1 Month</label>
      <label><input type="radio" name="6months" > >6 Months</label>
      <label><input type="radio" name="12months" > >12 Months</label><br>
      How many people do you know that are addicted as well?
      <input type="checkbox" value="none">None
      <input type="checkbox" value="few">Few (1-5)
      <input type="checkbox" value="tons">A lot (over 5)
      <p>If there's anything else you would like to point out feel free to do it.</p>
      <textarea name="feedback" cols="30" rows="10"></textarea>
      <input id="submit" type="submit" name="submit" value="Submit your information">
      </div>
    </form>
  </body>

0
投票

我想这可以帮助你实现你想要的。您可以使用以下代码段替换CSS代码。

#content{
    text-align:center;
    height:500px;
    width:100%;
}
#title {
    display:block;
}
#name {
    display:block;
    margin:0 auto;
}
#email {
    display:block;
    margin:0 auto;
}
#number {
    display:block;
    margin:0 auto;
}
© www.soinside.com 2019 - 2024. All rights reserved.