如何在普通CSS中避免这种重叠？

您好，我对所有这些HTML、CSS非常陌生，制作了一些网页，但不知道这里发生了什么。我想让这些技能在第一行结束时出现在第二行。宽度是700，所有的位置都在中心，我不知道为什么会重叠。谢谢

与技能课程相关的价值观：

 .projects, .badges, .links, .skills {
width: 700px;
margin: 0 auto;
}
.projects ul, .badges ul, .links ul, .skills ul {
list-style-type: none;
}

.projects li, .badges li, .links li, .skills li {
 margin-bottom: 10px;
 }

.skills {
margin-bottom: 20px;
}

.skills li{
font-family:"Open Sans", sans-serif;
background-color: #444;
color: #ccc;
font-weight: bold;
display:inline;
padding: 8px;
margin-right: 10px;

} 

---

您有导致此问题的

display:inline

，因为行距没有正确定义，所以填充或边距无关紧要。将其转换为内联块，它可以处理边距、填充和所有需要的内容

.skills li{ 
    display:inline-block;
 }

这在变化中起作用

li {
   display: inline-block;
}

---

因为如果使用

display:inline

，则填充和边距与其他div或标记重叠。内联块作为

li

作为块元素。

我不建议为此使用listitems。试试这个：

<div class="the_box_where_your_skills_are_in">
    <a class="skillitem">CSS/HTML</a>
</div>

CSS/HTML

---

CSS非常简单，只需与你的技能保持一个宽度，a标签将有一些填充、边距、背景和

display:block、float:left

你也可以得到如下结果

<div id="wrapper">
<div style="float:left;" class="content">Windows</div>
<div style="float:left;" class="content">Linux</div>
<div style="float:left;" class="content">Basic  </div>
<div style="float:left;" class="content">Software</div>
<div style="float:left;" class="content">Hardware</div>
<div style="float:left;" class="content">Networking</div>
<div style="float:left;" class="content">PHP</div>
</div>

---

[演示]：-

也分享你的HTML。这太高级了，我几天前开始学习。下面的解决方案很有帮助。如果你从不尝试，你将永远不会变得更好；）为什么你不推荐列表项呢？因为在我看来，列表项要复杂得多，它们的行为就像简单的a标签一样正常

div {
    border: 1px solid blue;
}

.content {
    width:100px;
}

#wrapper {
    min-width: 300px; /* 100px x3 = 300 */
    overflow:scroll;
}