Html 如何消除这两个div部分之间的间隙？

我的HTML代码看起来有点像这样，出于某种原因，它会不断错位或插入无法控制的间隙

<section id="boxes">

<div id="boxes1">
<ul>
<li>Justs the Facts</li>            
</ul>
</div>

<div id="boxes2">
<ul>
<li>Visit Neptune</li>
</ul>
</div>

</section>

---

这会创建两个块，中间有一个间隙。我如何创建它，使

boxes1

的div部分与

boxes2

之间没有边距或间隙？

这是因为您将

div

元素朝相反方向浮动

#boxes1 {
  width: 350px;
  float: left;
}
#boxes2 {
  width: 350px;
  float: right;
}

将它们都向左浮动

#boxes1, #boxes2 {
  width: 350px;
  float: left;
}

---

因为你把一个浮到右边。这将使div与包含div或主体的右侧对齐

您应该在两个选项上都使用float:left

像这样：

#boxes{
 width:700px;
 background-color: #ffffff
  }
#boxes1{
 width: 350px;
 float: left; }
#boxes2 {
width: 350px;
float: left;
} 

---

这两个框都使用

.boxes {
  width: 50%;
  float: left;
}

---

必须将两个长方体浮动到同一方向，向右或向左

#boxes1{
width: 350px;
float: left; /*or right*/ }
#boxes2 {
width: 350px;
float: left; /*or right*/ 
} 

---

这应该是必要的

#boxes{
 width:700px;
 background-color: #ffffff
  }
#boxes1{
 width: 350px;
 float: left; 
 }
#boxes2 {
width: 350px;
float: left;

} 

您可以在这里查看：

试试这个

用这个

#boxes ul {
    margin:0;
    padding:0;
}

---

ULS上的

margin:0

请注意div之间没有间隙。只是UL在每个div中占用的空间比您预期的要多。例如，在li元素前面有一个空白，在蓝色的“Just the facts”前面有一个“Visite Neptune”。如何删除它？只需添加以下内容：ul{list style:none；padding left:0；}，然后将答案标记为r8。所以其他人可以从中受益。我刚刚尝试过这个，它会导致列表元素被顺序处理。请看：您仍然可以在不同的方向上浮动。

#boxes1{
width: 50%;
float: left;
#boxes2 {
width: 50%;
float: left; 
} 

#boxes ul {
    margin:0;
    padding:0;
}