Как избежать этого перекрытия в простой 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

Я не рекомендую использовать для этого списки. Попробуйте это:

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

И CSS довольно просто, ширину в коробке с вашими навыками и а-теги будут иметь некоторый отступ, запас, фон и 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; 
} 

[Demo]: - http://jsfiddle.net/5zsyj/200/1