小编Sar*_* Y.的帖子

复选框对齐表替代项

我有 5 个复选框和一个有 6 行(1 个头,5 个主体)的表格,该表格代表问题的选择。如何将每个复选框与每行的第一行对齐?

table,
thead,
td {
  border: 1px solid black;
  padding: 3px;
}

thead {
  font-weight: bold !important;
}

table {
  margin: 5px;
  margin-bottom: 1rem;
}

.form-check {
  margin-left: -20px;
}
Run Code Online (Sandbox Code Playgroud)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<p style="margin-left: 20px;">
<form id='f1'>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='A'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='B'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='C'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='D'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='E'></div>
</form>
<table>
  <thead>
    <tr>
      <td> …
Run Code Online (Sandbox Code Playgroud)

css bootstrap-4

1
推荐指数
1
解决办法
60
查看次数

标签 统计

bootstrap-4 ×1

css ×1