要对齐左侧的单选按钮和复选框,可以使用以下方法:
<table>
<tr>
<td><input type="radio" name="option" value="option1"></td>
<td>选项1</td>
</tr>
<tr>
<td><input type="radio" name="option" value="option2"></td>
<td>选项2</td>
</tr>
<tr>
<td><input type="checkbox" name="option" value="option3"></td>
<td>选项3</td>
</tr>
<tr>
<td><input type="checkbox" name="option" value="option4"></td>
<td>选项4</td>
</tr>
</table>
<div class="container">
<input type="radio" name="option" value="option1">
<label>选项1</label>
<br>
<input type="radio" name="option" value="option2">
<label>选项2</label>
<br>
<input type="checkbox" name="option" value="option3">
<label>选项3</label>
<br>
<input type="checkbox" name="option" value="option4">
<label>选项4</label>
</div>
<style>
.container {
width: 200px;
}
input[type="radio"],
input[type="checkbox"] {
float: left;
margin-right: 10px;
}
</style>
<div class="container">
<input type="radio" name="option" value="option1">
<label>选项1</label>
<br>
<input type="radio" name="option" value="option2">
<label>选项2</label>
<br>
<input type="checkbox" name="option" value="option3">
<label>选项3</label>
<br>
<input type="checkbox" name="option" value="option4">
<label>选项4</label>
</div>
<style>
.container {
display: flex;
flex-direction: column;
}
input[type="radio"],
input[type="checkbox"] {
align-self: flex-start;
}
</style>
以上是三种常见的方法来对齐左侧的单选按钮和复选框。根据具体的需求和布局,选择适合的方法即可。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云