CSS自適應橫線寬度一直是前端開發中的一個重要話題。它的實現方式很簡單，但要做到穩定、兼容性好卻需要一定的技巧。 首先，我們需要定義一個容器來包裹橫線。由于橫線的長度是根據容器的寬度來自適應的，因此我們需要讓容器具有一個固定的寬度，例如：

.container {
width: 100%;
max-width: 800px; /* 設置一個最大寬度 */
margin: 0 auto; /* 居中布局 */
}

接下來，我們需要定義橫線的樣式。對于橫線的寬度，我們可以使用百分比單位來自適應容器的寬度，例如：

.line {
height: 1px;
background-color: #ccc;
width: 50%; /* 橫線的寬度是容器寬度的50% */
margin: 20px auto; /* 居中布局 */
}

上面的代碼中，我們設置了橫線的高度為1像素，背景顏色為灰色，橫線的寬度為50%。注意，我們使用了auto值來讓橫線水平居中顯示。 此時，我們已經成功實現了自適應橫線的寬度。在容器寬度發生變化時，橫線的寬度也會隨之調整。 需要注意的是，在某些情況下，例如橫線中包含文字時，可能需要調整橫線的位置，以使其與文字對齊。此時，可以使用position:absolute來對橫線進行精確定位。例如：

.line {
position: absolute;
bottom: -5px; /* 距離文字底部的距離 */
height: 1px;
background-color: #ccc;
width: 50%;
margin: 0 auto; /* 居中布局 */
}

上面的代碼中，我們使用了position:absolute將橫線進行絕對定位，然后通過bottom屬性來調整橫線距離文字底部的距離。這樣，即使容器寬度發生變化，橫線的位置也會保持不變。 以上就是CSS自適應橫線寬度的實現方式，希望對您有所幫助。