Question

我开发了一系列角度不同的技能，这些技能在我的网站桌面版本上显示正常并正确包装，但在较小的屏幕上，这些项目忽略了容器的填充和宽度，并且无法始终包裹同一点。

具有讽刺意味的是，如果数组中的“响应式设计”对象显示在列表中，它将不会包含“响应式”一词，因此总是超过容器的宽度，并且“设计”一词正确包装到了新的一行。

Codepen：http://codepen.io/nickwcook/full/KWePVx/。

HTML：

<section id="about" ng-controller="skillsController">

  <div class="sectionContent">

    <div id="bio">

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

    <div id="skillsList">

      <p>My skills include:</p>

        <p ng-repeat="skill in skills" class="skillItem">{{skill.name}}.</p>

    </div>

    </div>

  </div>

</section>

CSS：

section
{
display: block;
margin: 0;
background: transparent;
z-index: 90;
}

.sectionContent
{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 100px 30px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

/* ABOUT SECTION */

#about .sectionContent > div
{
width: 100%;
padding: 0 15%;
}

#about p
{
line-height: 26px;
text-align: center;
}

#about #skillsList
{
text-align: center;
margin-top: 50px;
}

#about #skillsList p:first-of-type
{
margin-bottom: 10px;
}

#about #skillsList p.skillItem
{
display: inline;
margin: 0 15px;
}

Answer 1

更改此

#about #skillsList p.skillItem {
  display: inline;
  margin: 0 15px;
}

到这个

#about #skillsList p.skillItem {
  display: inline-block; 
  margin: 0 15px;
}

- 这将修复你的布局，但我的建议是你从P元素移动到使用List（ul＆gt; li）进行更加语义化的方法。

AngularJS - 重复的P标签未正确包裹

1 个答案: