html - 我如何才能使边框仅在一侧跨越一定的长度？

Question

如何使边框仅在一侧跨越一定长度？我试过了

<ul id = 'list'>
    <li class = 'list-item'>example1</li>
    <li class = 'list-item'>example2</li>
    <li class = 'list-item'>example3</li>
</ul>

和CSS:

<style>
#list{
  list-style-type:none;
  display:inline;
}
.list-item{
 float:left;
 border-left:solid 5px red;
 }
</style>

Answer 1

让边框占据元素宽度或高度的部分的唯一方法是使用两个元素 - 父元素和子元素(或绝对定位的元素)。

应在高度较小的元素上指定垂直边框，应在宽度较小的元素上指定水平边框。

这可以在以下示例中看到:

#div1 {
  height: 200px;
  width: 100px;
  border-top: 5px solid red;
}

#div2 {
  height: 100px;
  width: 200px;
  padding-left: 5px;
  border-left: solid 5px red;
}

<div id="div1">
  <div id="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et ex sed mi luctus luctus sed sed mauris. Cras pretium nisi non odio rhoncus, id viverra erat rutrum. Vivamus congue ultrices sem maximus tempor. Suspendisse in est gravida, elementum lorem eget, tincidunt urna.</div>
</div>

希望这有帮助! :)