Question

我想在单独的一行中执行ul和div，并且ul也应显示在右上角。当我在ul和float上使用li属性时，它会转到右侧，但div也会出现在上面的行上，为什么它的happing我也使用:after和{ {1}} :before并使用了ul属性，但没有得到正确的输出。

https://jsfiddle.net/rawat/4kd4y2zz/

HTML：

clear

CSS：

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>
<div>
    Hello Its a Full Article
</div>

Answer 1

将clear: both（或右）放到div。

div {clear: both}

https://jsfiddle.net/4kd4y2zz/1/

Answer 2

请尝试以下操作： Demo

CSS：

ul{
    float:right;
    margin:0;
    padding:0
    display:block;
    list-style:none;  
    background:grey;
}
ul:after, ul:before{
    content:"";
    display:table;
    clear:both;
}
ul li{
    margin-left:10px;
    float:left;
    display:inline-block;
}
div{
    clear:both;
    display:block;
    width:100%;
     background:yellow;
}

Answer 3

在div CSS中放入以下属性：

clear:both;

Answer 4

有几种方法可以用来实现预期的结果

CSS

div {
  clear:both
}

ul:after{
  content: '';
  display:block '';
  clear:both;
}

或者您可以使用样式<div></div>

在DOM中添加额外的clear:both

将ul浮动到右边时为什么div不会出现在下一行？

4 个答案: