我怎樣才能讓邊界只在一邊跨越一定的長度？

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黑客：

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

希望這有助於！ :)