HTML列出动态内容的样式问题

Question

我已经出现过几次这个问题了，我完全迷失了。

每当我在ul li项目上创建边框底线时，如果li项目是两行，它会忽略填充，或者进入填充。

你如何解决这个问题？

看到这一行：tech：自定义wordpress主题，因为它落在两行上，它不会均匀分布。

[Link]（http://natashamcdiarmid.com/nm_portfolio/3-oaks-landscaping/）

ul#portfolio-details li{
   height:100%;
   padding:8px 0 40px 0;
   line-height:1.2em;
   border-bottom:1px #f2f3f4 solid;
}

Answer 1

这是因为li没有环绕其浮动的内容。要解决此问题，请添加overflow: hidden：

li {overflow: hidden;}

然后你可能想要稍微减少边距/填充（由于错误的原因而在那里）。

  

但请注意，在ul内直接使用div是无效的。你需要在那里li。

Answer 2

试试这个：

ul#portfolio-details li{
   height:100%;
   padding:8px 0 20px 0;
   line-height:1.2em;
   border-bottom:1px #f2f3f4 solid;
   overflow: hidden;
}