Css 如何避免内容与div边框重叠

这里我有一个标记：

   <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>

我需要的内容不重叠的权利边界的div，而是要填补一些5px的距离。这是我的建议。我试着玩z-index，但没用。我该怎么办

那么以下内容如何：

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

---

使用内联块使

div

适合内容，然后添加填充。如果您只希望子级

ul

执行此操作，只需将这些属性应用于

div.cabinet ul

（以及边框）。

为ul或LI标签添加填充

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

---

您可以更改5px值，但这就足够了

这确实解决了问题。当大量ul被用于创建treeview，并且treeview被扩展时，内容仍然与边界重叠时，您有什么解决方案吗？我是指静态内容（问题中就是这种情况）这是一个完美的解决方案，但不幸的是，当内容在diplay:none和display:block之间切换时，这一点就会中断。我知道这个问题没有提到这个案子，但我很高兴知道。

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