Html AngularJS-重复的P标记未正确包装

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

具有讽刺意味的是，当列表中显示数组中的对象“Responsive Design”时，它不会将单词“Responsive”换行，因此这总是会超过容器的宽度，而单词“Design”会正确换行

代码笔：

HTML:

改变这个

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

对此

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

---

--这将修复您的布局，但我建议您从p元素转移到使用列表（ul>li）以获得更具语义的方法。

Ah。我以前确实试过这个，它把事情搞得更糟，但这次成功了。。。。所以我花了很长时间试图修复它，我最初尝试过的方法现在也可以用了。更改为列出项目也是一个好主意。谢谢

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

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