复选框竖着排列的代码
时间: 2024-09-28 08:01:39 浏览: 28
jQuery多级复选框checkbox选中代码
要在HTML中创建垂直排列的复选框列表,可以使用CSS的`display: inline-block`和`vertical-align: top`属性。下面是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
/* CSS样式 */
.vert-checkboxes {
display: flex;
flex-direction: column; /* 设置列方向 */
}
.checkbox-item {
display: inline-block;
vertical-align: top;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h2>垂直排列的复选框</h2>
<div class="vert-checkboxes">
<input type="checkbox" id="cb1" class="checkbox-item" name="options[]" value="option1">
<label for="cb1">选项1</label>
<input type="checkbox" id="cb2" class="checkbox-item" name="options[]" value="option2">
<label for="cb2">选项2</label>
<input type="checkbox" id="cb3" class="checkbox-item" name="options[]" value="option3">
<label for="cb3">选项3</label>
</div>
</body>
</html>
```
在这个例子中,`.vert-checkboxes` 类设置了`flex-direction`为`column`,使得复选框元素按垂直方向排列。每个单个的复选框和标签组合(`.checkbox-item`)使用了`inline-block`和`vertical-align: top`使其在同一行内垂直对齐。
阅读全文