如何避免内容重叠div边框

Question

我这里有一段标记：

   <div class="cabinet">
     <ul>
        <li>This is short</li>         
        <li>This one is longer</li>         
        <li>Yet this one is a lot more longer</li>         
     </ul>
   </div>

以下是 CSS 代码:

div.cabinet{
  width:120px;
  border-right:5px solid #e7e8e1;
  white-space:nowrap;
}

我希望内容不要重叠在div的右边界上，而是向内缩进5px。这是jsfiddle。我尝试使用z-index进行调整，但没效果。我该怎么做？

- Mikayil Abdullayev

Answer 1

演示 Fiddle

以下怎么样：

div.cabinet{
  border-right:5px solid #e7e8e1;
  white-space:nowrap;
  display:inline-block;
  padding-right:5px;
}

使用 inline-block 让 div 适应内容，然后添加 padding。如果你只希望子 ul 实现这一效果，只需将这些属性应用于 div.cabinet ul（以及边框）。

- SW4

---

这真的解决了问题。您有任何解决方案来解决使用大量ul创建树形视图并且当展开树形视图时内容仍然重叠边框的情况吗？ - Mikayil Abdullayev

我的意思是针对静态内容（这也是问题的情况），这是一个完美的解决方案，但不幸的是当内容在display:none和display:block之间切换时，它会出现问题。我知道问题没有提到这种情况，但了解这一点会很好。 - Mikayil Abdullayev

Answer 2

在你的UL或LI标签中添加填充。

ul{padding:5px;} /** Will be applicable to all li's or you can also give it seperately **/ 

你可以改变那个5像素的值，但那已经足够了！

- Deepak Yadav