• 主页
  • 如何将复选框放在li元素内居中?

如何将复选框放在li元素内居中?

我有一个带有div内容和span with复选框的项目列表。我想把我的复选框跨度定位到li元素的中心。

<li class="e-list e-state-default e-list-check">
    <div class="cont-bg">
       content here varies
     </div>
 <span >
 <input class="e-lv-check e-checkbox e-js e-input" type="checkbox"/>
  </span>
</li>

内容是动态加载的,因此其高度和宽度会有所不同。我无法为定位设置填充。也尝试过使用垂直对齐进行定位。什么都不管用。

?

.e-list.e-state-default {
  background-color: #fff;
  border-color: #c8c8c8;
}
.e-list {
  border-bottom: 1px solid #c8c8c8;
  font-size: 12px;
}
.cont-bg {
  font-size: 17px;
  height: 100px;
  padding-left: 5px;
  padding-top: 10px;
  width: 80%;
  display: inline-block;
}
.e-list .e-lv-checkdiv {
  float: right;
}
.e-list {
  border-bottom: 1px solid #c8c8c8;
  font-size: 12px;
}
.e-list {
  line-height: normal;
  padding: 0 15px;
  cursor: pointer;
  vertical-align: middle;
}
<ul>

  <li class="e-list e-state-default e-list-check">
    <div class="cont-bg">
      <div class="brooke">
      </div>
      <div class="listrightdiv">
        <span class="templatetext">Brooke</span>  <span class="designationstyle">HR Assistant</span>
        <div class="aboutstyle">
          Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office.
        </div>
      </div>
    </div>
    <span><input class="e-lv-check e-checkbox e-js e-input" type="checkbox" tabindex="" name="null" value="true" /> </span>
  </li>
  <li class="e-list e-state-default e-list-check">
    <div class="cont-bg">
      <div class="brooke">
      </div>
      <div class="listrightdiv">
        <span class="templatetext">Brooke</span>  <span class="designationstyle">HR Assistant</span>
        <div class="aboutstyle">
          Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office.
        </div>
      </div>
    </div>
    <span><input class="e-lv-check e-checkbox e-js e-input" type="checkbox" tabindex="" name="null" value="true" /> </span>
  </li>
</ul>

?

有人能帮我吗?

转载请注明出处:http://www.jubohx.com/article/20230503/2240357.html