Question

div中的checkbox元素不会在CSS的最右边浮动。每个新div元素的checkbox元素float都不同。我怎么做对了？

div.container{
   height : 200px;
   width : 300px;
   box-shadow : 0 0 3px grey;
}
div.drop-down > div { width : 100px; background-color : #dddddd; }
div.drop-down > div input[type="checkbox"]{ float : right; }

<div class='container'>
 <div class='drop-down'>
   <div>one<input type="checkbox"></div>
   <div>two<input type="checkbox"></div>
   <div>three<input type="checkbox"></div>
 </div>
</div>

Answer 1

在子元素上使用float时，您忘记设置父元素的布局。

设置父元素的布局有很多种方法。您可以使用overflow: hidden，即：

div.drop-down > div {
  overflow: hidden;
}

或者您也可以使用:after伪元素：

div.drop-down > div:after {
  display: block;
  content: '';
  clear: both;
}

div.container{
   height : 200px;
   width : 300px;
   box-shadow : 0 0 3px grey;
}
div.drop-down > div {
  width : 100px; background-color : #dddddd;
  overflow: hidden;
}
div.drop-down > div input[type="checkbox"]{ float : right; }

<div class='container'>
 <div class='drop-down'>
   <div>one<input type="checkbox"></div>
   <div>two<input type="checkbox"></div>
   <div>three<input type="checkbox"></div>
 </div>
</div>

元素不浮动吧？

1 个答案: