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

您可以尝试line-height hack：

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

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

伪元素黑客：

#list {
  list-style-type: none;
  display: inline;
}

.list-item {
  float: left;
  position: relative;
  margin-left: 5px;
}

.list-item:after {
  content: '';
  background-color: red;
  bottom: 0;
  height: 50%;
  left: -5px;
  position: absolute;
  width: 5px;
}

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

Answer 2

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

应在具有较小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>

希望这有帮助！：）

我如何制作它以使边框仅在一侧跨越一定长度？

2 个答案: