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

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

应在height较小的元素上指定垂直边框，应在width较小的元素上指定水平边框。

这可以在下面的例子中看到:

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

希望对您有所帮助! :)