首页 文章

垂直对齐输入与具有背景图像的标签

提问于
浏览 次
0

我没有隐藏我的Checkbox但是隐藏了它，给出了CSS属性width：0px和opacity：0 [为了验证] .

如何垂直对齐背景图像和文本

看起来像这样（假设checkboxbgimage作为背景图像，在CSS中为标签下的span设置）

checkboxbgimage Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore .

预期：

文本不应该在checkboxbgimage下包装 . 下一行应该与它上面的行平行 .

这是标记：

HTML

<div class="testDiv">
 <input type="checkbox" id="checkboxtest">
  <label for ="checkboxtest"><span></span>Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
 </label>
</div>

CSS

.testDiv>input{
   width:0px;
   opacity:0;
 }
.testDiv input[type="checkbox"] + label span{
   background: rgba(0, 0, 0, 0) url("http://oi59.tinypic.com/i5ngoj.jpg") no-repeat scroll -6px -481px;
   cursor: pointer;
   display: inline-block;
   height: 25px;
   margin-right: 5px;
   position: relative;
   vertical-align: middle;
   width: 30px;
   }

.testDiv input[type="checkbox"]:checked + label span{
   background: rgba(0, 0, 0, 0) url("http://oi59.tinypic.com/i5ngoj.jpg") no-repeat scroll -20px -450px;
}

谢谢你... !!!!

html css

1 回答

  • 0

    html addition - 在div中包装标签文本

    <label for ="checkboxtest">
   <span></span>
   <div>
     Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do 
     eiusmod tempor incididunt ut labore et dolore
   </div>
</label>

    css另外

    .testDiv {
  display:flex;
}

.testDiv label {
  display:flex;
}

    http://codepen.io/anon/pen/qbVwva

    回复于

相关问题