延长边界css的长度

Question

如何扩展超出文本长度的边框长度？这是我到目前为止:

    color: #8C4600;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    border-bottom: 1px solid #D1D1D1;

这是HTML: <li class = "vendors">VENDORS</li>

Answer 1

CSS边框位于HTML元素的边距和填充之间.如果希望HTML元素的边框延伸超过该元素的宽度(或高度),则可以向元素添加CSS填充以向外推动边框.

例如,如果您的html正在<li class=vendors">VENDORS</li>添加padding:0 10px;到您的CSS中,则会将右侧和左侧的边框向外推10px.

Answer 2

使用填充和负边距.

例如:

div {
  padding: 1em;
  margin: 0 -1em;
  border-bottom: 1px solid red;
}

上面给出了所有边的填充,左边和右边的负1em边距.你可能希望摆弄那个.