css填充导致边框重叠

Question

我有css在列表项周围添加边框，但是当我添加填充时，列表项＆＃39;边界开始相互交叉。这是我目前对李的css：

.display_times{padding: 5px 10px 5px 10px !important; font-size: 24px; border:1px solid black; display:inline; }

这是一张它看起来像什么的照片。

是否有任何方法可以保持填充但是将边框向后推，以便它们更像这样，但是使用填充：

Answer 1

看来这个css有效：

.display_times {
  padding: 5px 10px 5px 10px !important;
  font-size: 24px;
  border:1px solid black; 
  display: inline-block;
}

Answer 2

不确定这是否是你所追求的，但是：

HTML

<ul>
  <li>10:00</li>
  <li>12:00</li>
  <li>13:00</li>
</ul>

CSS

ul{
  padding: 0;
  list-style: none;
  border:1px solid black;
}

li {
  border-bottom: 1px solid black;
}

li:last-child{
  border-bottom: 0;
}

Answer 3

这是一种方法。

＆＃13;

＆＃13;

div {
  width: 50px;
  text-align: center;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  padding: 5px;
 }
.last {
  border-bottom: 1px solid black;
 }

＆＃13;

<div>11:00</div>
<div>12:00</div>
<div>13:00</div>
<div class="last">14:00</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

不要使用显示：内嵌，如果您想为元素指定填充或高度，因为这些属性不适用于内联

您只能使用内联设置左或右宽度，最好始终用于内联块这样的情况。