当文本包裹浮动元素时保持文本对齐？

Question

我正在创建一个响应式网站，但我已经在示例中使用固定宽度的容器div来说明问题。

当文本换行到多行并延伸到绿色框下方时，它会丢失其缩进。我可以仅使用CSS修复此问题，而不是更改HTML吗？

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

<div class="cont">
<label for="one">
  <div class="">
    <a href="#" class="check-style">
      <span></span>
    </a>
    <input type="checkbox" class="" value="1" id="one" name="privacy"></div> Ive read <a href="#">document</a>. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. And I agree. 
</label>
</div>

.cont {
  width: 400px;  
}

.check-style {
  background: green;
  float: left;
  height: 40px;
  width: 40px;
}

input[type=checkbox] {
  opacity: 0;
  position: absolute;
}

Answer 1

不好，但正在工作..将你的css添加/更改为以下内容：

.cont {
  width: 400px;  
}

label > div {
  height: 70px;
  float: left;
}

.check-style {
  background: green;
  display: inline-block;
  height: 40px;
  width: 40px;
}

input[type=checkbox] {
  opacity: 0;
  position: absolute;
}

见here

该解决方案的问题是div的绝对高度