gpt4 book ai didi

html - 如何在一行中将单选按钮与标签对齐?

转载 作者:太空宇宙 更新时间:2023-11-04 15:00:35 26 4
gpt4 key购买 nike

<分区>

我有包含标签和输入(单选按钮)的 HTML 表单。我使用 clear:both;float:left; 对齐左侧的标签并在其前面的同一行输入,它有效,但这也会影响 radio 纽扣。我有两个标签,后面跟着单选按钮,然后又是一个标签,后面跟着单选按钮。如何将所有这些(2 个标签 + 单选按钮 + 标签 + 单选按钮)全部排成一行?

我尝试使用 float:nonedisplay:inline; 但它不起作用。标签和单选按钮显示在标签的底部。

form label {
width: 225px;
font-weight: bold;
float: left;
clear: both;
}
form {
width: 70%;
}
form input {
float: left;
}
form input #yes,
form input #no {
display: inline;
float: none;
}
form label[for="yes"],
form label[for="no"] {
display: inline;
}
<form>
<label for="fname">First name:</label>
<input id="fname" name="fname" type="text">
<label for="lname">Last name:</label>
<input id="lname" name="lname" type="text">
<label for="email">What is your email address?</label>
<input id="email" name="email" type="email">
<label for="when">When did it happen?</label>
<input id="when" name="when" type="text">
<label for="howlong">How long were you gone?</label>
<input id="howlong" name="howlong" type="text">
<label for="howmany">How many did you see?</label>
<input id="howmany" name="howmany" type="text">
<label for="desc">Describe them:</label>
<input id="desc" name="desc" type="text">
<label for="whatdo">What did they do to you?</label>
<input id="whatdo" name="whatdo" type="text">
<label for="seen">Have you seen my dog Fang?</label>
<label for="yes">Yes</label>
<input id="yes" name="seen" type="radio" value="yes">
<label for="no">No</label>
<input id="no" name="seen" type="radio" value="no">
</form>

我想用 CSS 而不是 HTML 来实现这一点。有些答案解释了如何通过重构 HTML 来实现它,但我想保持相同的 HTML 结构。

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