gpt4 book ai didi

html - 是什么让第一段和第二段向左浮动?

转载 作者:行者123 更新时间:2023-11-28 01:18:52 25 4
gpt4 key购买 nike

#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 容器中的所有内容,但现在您可以看到它出于某种原因 float 到左侧。
我希望它像其他东西一样居中。
在这里使用 flexbox 是一个糟糕的选择还是什么?

最佳答案

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

关于html - 是什么让第一段和第二段向左浮动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51638093/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com