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

Question

Hellou，我对所有这些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;

} 

Answer 1

您有display:inline导致此问题，因为未正确定义行高，因此填充或边距无关紧要。把它变成内联块，它可以用边距，填充和你需要的所有东西

.skills li{ 
    display:inline-block;
 }

这有效

Answer 2

更改

li {
   display: inline-block;
}

因为如果你使用display: inline，填充和边距会与其他div或标签重叠。内联块将li视为块元素。

Answer 3

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

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

而且CSS非常简单，只需要一个带有你的技能和a-tags的框的宽度就会有一些填充，边距，背景和display: block, float: left

Answer 4

你也可以得到像

这样的结果

<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>

CSS： -

div {
    border: 1px solid blue;
}

.content {
    width:100px;
}

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

[演示]： - http://jsfiddle.net/5zsyj/200/ 1