如何避免内容重叠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，但它没有帮助。我该怎么办？

Answer 1

Demo Fiddle

以下内容如何：

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

使用inline-block使div符合内容，然后添加填充。如果您只希望孩子ul执行此操作，只需将这些属性应用于div.cabinet ul（以及边框）。

Answer 2

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

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

你可以改变5px的值，但这就足够了！