gpt4 book ai didi

css - 复选框需要与标签标记对齐

转载 作者:行者123 更新时间:2023-11-28 02:24:06 28 4
gpt4 key购买 nike

我正在尝试将我的 checkbox 与我的 label 文本对齐。 Here is my snapshot of webpage .

我正在使用一个复选框,只有当它被选中时才会显示下拉列表。

select {
visibility: hidden;
}

input {
margin-left: 5px;
margin-top: 15px;
}

input[type=checkbox]:checked + select {
visibility: visible;
}
<label>Applying for masters</label>
<input type="checkbox" value="yes" name="masters">

<select>
<option>Select</option>
<option>CS</option>
<option>EC</option>
<option>IT</option>
</select>

最佳答案

尝试以下操作。将您的复选框包裹在一个 div 元素中并在该类上应用 CSS。

设置样式vertical-align: middle

  <html>
<head>
<title></title>
<style>
select {
visibility: hidden;
}

input {
margin-left: 5px;
}
input[type=checkbox]:checked + select {
visibility: visible;
}
/* new style to align check box */
.checkboxes input {
vertical-align: middle;
}

</style>
</head>
<body>
<!-- new div tag to wrap all check boxes inside it -->
<div class="checkboxes">
<label for="masters">Applying for masters</label>
<input type="checkbox" id="masters" value="yes" name="masters">
<select>
<option>Select</option>
<option>CS</option>
<option>EC</option>
<option>IT</option>
</select>
</div>
</body>
</html>

关于css - 复选框需要与标签标记对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55465966/

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