Question

我在这里有一点问题。这是我的HTML。

<div class="one">
</div>

<div class="two">
   <ul class="ulclass">
     <li>DASDA</li>
     <li>QWEQW</li>
   </ul>
</div>

这是我的CSS：

.one{
  width: 100%;
  height: 300px;
  background-color: black;
}

.two{
  margin-top: 0px;
  display: block;
  padding: 0px;
  margin-bottom: 0px;
}
.ulclass{
list-style-type: none;

margin:0px;
margin-bottom: 0px;
}

.ulclass li{
width: 500px;
padding: 10px;
overflow: auto;  
float: left;
}

我的问题是这个div彼此相邻而不是在另一个之上。

看起来像这样。

http://oi57.tinypic.com/2lm5e1i.jpg

我希望绿色的那个是黑色的。我尝试了很多东西而且我不能这样做...请帮助我。

对不起，如果这是新手的话。
感谢。

我忘记了，这个div是在另一个DIV里面，它是一个容器这里是css：

.rost{
  height: 100%;
  min-height: 300px;
  background-color: #fff;
padding: 0px;
padding-left: 0px;
  box-shadow: 0  0 28px rgba(0, 0, 0, .6);
  display: flex;  
  display: -webkit-box;

}

这是JSFIDDLE：http://jsfiddle.net/aemgm73z/

Answer 1

尝试将clear:both;添加到.two类

.two{
  clear:both;
  margin-top: 0px;
  display: block;
  padding: 0px;
  margin-bottom: 0px;
}

Answer 2

您是否有任何具体理由将float: left纳入您的CSS？删除后，事情正如您所期望的那样。

.one{
  width: 100%;
  height: 300px;
  background-color: black;
}

.two{
  margin-top: 0px;
  display: block;
  padding: 0px;
  margin-bottom: 0px;
  background-color: green;
}

.ulclass{
  list-style-type: none;
  margin:0px;
  margin-bottom: 0px;
}

.ulclass li{
  width: 500px;
  padding: 10px;
  overflow: auto;
}

<div class="one">
</div>

<div class="two">
   <ul class="ulclass">
     <li>DASDA</li>
     <li>QWEQW</li>
   </ul>
</div>

Answer 3

从您的风格中删除disply:block和margin-top:0px属性

Answer 4

尝试将display:block;添加到您的.one样式，这会使绿色div降低到下一行。

Answer 5

从父容器中删除display: -webkit-box和display: flex。

就第二个div而言，似乎你已将<li>元素放在<a>元素中，这就是为什么它们会从div中溢出。子div在父div中div，但是因为你已经包含了这些链接，所以div的另一种方式是不会扩展以包裹它们

你可以通过指定一个固定的高度来看这一点，比如1000px到.lista div，并且在检查时发现.rost会包含两个div。

交换li和a代码应该适合您。

为什么我的DIV不会下来？

5 个答案: