将复选框与标签对齐

Posted 2021-02-22

Aligning a label with a checkbox can be tricky. Here is the html and CSS I used to achieve it.

<!-- The HTML -->
<div class="checkbox-label"><input type="checkbox" /><span>Remember me</span></div>
 
// The CSS
.checkbox-label {
  display: inline;
  font-size: 12px;
  padding-left: 5px;
}
 
.checkbox-label span {
    padding-left: 5px;
    padding-bottom: 15px;
    vertical-align: bottom;
    line-height: 22px;
}