input,checkbox文字对齐

你可以使用label元素来实现输入和复选框的文字对齐：

HTML代码：

<label for="input">输入：</label>
<input type="text" id="input" name="input"><br>

<label for="checkbox">复选框：</label>
<input type="checkbox" id="checkbox" name="checkbox">

CSS代码：

label {
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 10px;
}

这样，label元素将会有一个固定宽度和右对齐的文本，使得输入和复选框的文字对齐。

相关问题

<div class="wpwz"> <div class="wup_zl_xz"> <span><input type="checkbox" style="margin-left: 5px;">生命值</span> <span><input type="checkbox">攻击速度</span> <span><input type="checkbox">护甲穿透</span> </div> <div class="wup_zl_xz_1"> <span><input type="checkbox" style="margin-left: 5px;">暴击</span> <span><input type="checkbox" >攻击速度</span> <span><input type="checkbox">护甲穿透</span> </div> <div class="wup_zl_xz"> <span><input type="checkbox" style="margin-left: 5px;">法术伤害</span> <span><input type="checkbox">攻击速度</span> <span><input type="checkbox">消耗品</span> </div> <div class="wup_zl_xz"> <span><input type="checkbox" style="margin-left: 5px;">韧性</span> <span><input type="checkbox">法力值</span> <span><input type="checkbox">护甲穿透</span> </div> <div class="wup_zl_xz"> <span><input type="checkbox" style="margin-left: 5px;">生命值</span> <span><input type="checkbox">攻击速度</span> <span><input type="checkbox">附魔</span> </div> <div class="wup_zl_xz"> <span><input type="checkbox" style="margin-left: 5px;">法力回复</span> <span><input type="checkbox">法术吸血</span> <span><input type="checkbox">移动速度</span> </div> <div class="wup_zl_xz"> <span><input type="checkbox" style="margin-left: 5px;">护甲值</span> </div> </div>css代码.wup_zl_xz span{ margin: 10px; } .wup_zl_xz span input{ transform: translateY(2px) translateX(-5px); } .wpwz{ font-size: 12px; } .wup_zl_xz_1 { float: left; margin-top: 10px; } .wup_zl_xz_1 span{ margin: 13px; } .wup_zl_xz_1 span input{ transform: translateY(2px) translateX(-5px); }修改以上代码实现所有input与第一行对齐间距相同

可以将所有的input都设置一个固定的宽度，然后使用flex布局将它们放在同一行，并设置justify-content为space-between，最后将每行的第一个span设置margin-left为0，就可以实现所有input与第一行对齐，间距相同的效果。

修改后的CSS代码如下：

.wup_zl_xz span {
  margin: 10px 10px 10px 0;
}

.wup_zl_xz span input {
  width: 16px;
  transform: translateY(2px) translateX(-5px);
}

.wup_zl_xz_1 {
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
}

.wup_zl_xz_1 span {
  margin: 10px 13px 10px 0;
}

.wup_zl_xz_1 span input {
  width: 16px;
  transform: translateY(2px) translateX(-5px);
}

.wpwz {
  font-size: 12px;
}

使用css修改checkbox和radio的样式尺寸后，选择框和后面对应的文字 无法水平对齐

当使用 CSS 修改 checkbox 和 radio 样式和尺寸后，可能会导致选择框和后面对应的文字无法水平对齐。这是因为原生的选择框和自定义的选择框大小和位置不同，导致文字对齐出现问题。为了解决这个问题，可以采用以下两种方法之一：

1. 使用 `vertical-align` 属性将选择框和文字垂直对齐。示例代码如下：

   input[type="checkbox"],
   input[type="radio"] {
     display: none;
   }

   label.checkbox,
   label.radio {
     display: inline-block;
     vertical-align: middle;
     margin-right: 10px;
     position: relative;
     padding-left: 30px;
     cursor: pointer;
   }

   label.checkbox:before,
   label.radio:before {
     content: "";
     display: inline-block;
     width: 20px;
     height: 20px;
     border: 1px solid #ccc;
     position: absolute;
     left: 0;
     top: 0;
     border-radius: 4px;
     transition: all 0.3s ease;
   }

   label.checkbox:before {
     border-radius: 4px;
   }

   label.checkbox:after,
   label.radio:after {
     content: "";
     display: inline-block;
     width: 10px;
     height: 10px;
     position: absolute;
     left: 4px;
     top: 4px;
     border-radius: 2px;
     transition: all 0.3s ease;
     opacity: 0;
   }

   label.checkbox:hover:before,
   label.radio:hover:before {
     border-color: #666;
   }

   input[type="checkbox"]:checked + label.checkbox:before,
   input[type="radio"]:checked + label.radio:before {
     border-color: #f00;
   }

   input[type="checkbox"]:checked + label.checkbox:after,
   input[type="radio"]:checked + label.radio:after {
     opacity: 1;
   }

2. 将选择框和文字放在容器中，并使用 `display: flex; align-items: center;` 将其垂直对齐。示例代码如下：

   .container {
     display: flex;
     align-items: center;
   }

   input[type="checkbox"],
   input[type="radio"] {
     display: none;
   }

   label.checkbox,
   label.radio {
     position: relative;
     padding-left: 30px;
     cursor: pointer;
   }

   label.checkbox:before,
   label.radio:before {
     content: "";
     display: inline-block;
     width: 20px;
     height: 20px;
     border: 1px solid #ccc;
     position: absolute;
     left: 0;
     top: 0;
     border-radius: 4px;
     transition: all 0.3s ease;
   }

   label.checkbox:before {
     border-radius: 4px;
   }

   label.checkbox:after,
   label.radio:after {
     content: "";
     display: inline-block;
     width: 10px;
     height: 10px;
     position: absolute;
     left: 4px;
     top: 4px;
     border-radius: 2px;
     transition: all 0.3s ease;
     opacity: 0;
   }

   label.checkbox:hover:before,
   label.radio:hover:before {
     border-color: #666;
   }

   input[type="checkbox"]:checked + label.checkbox:before,
   input[type="radio"]:checked + label.radio:before {
     border-color: #f00;
   }

   input[type="checkbox"]:checked + label.checkbox:after,
   input[type="radio"]:checked + label.radio:after {
     opacity: 1;
   }

以上两种方法都可以解决选择框和文字无法水平对齐的问题，根据实际情况选择其中一种即可。