我有这段代码,我正在尝试让 hr 在文本开始时开始,在文本结束时结束,这可能吗?实际上它只需要初始宽度屏幕
.slider-single {
white-space: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
}
a {
text-decoration: none;
color: red;
font-weight: 800;
margin-left: 3rem;
}
hr {
background-color: blue;
}
<div class="slider-single">
<div>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
</div>
<hr>
</div>
最佳答案
将内部 div 设为 inline-block
并为其添加 border-bottom
.slider-single {
white-space: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
}
.slider-single > div {
display:inline-block;
padding-bottom:10px;
border-bottom:1px solid blue;
margin-bottom:10px;
margin-left: 3rem;
}
a {
text-decoration: none;
color: red;
font-weight: 800;
}
a:not(:first-child) {
margin-left: 3rem;
}
<div class="slider-single">
<div>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
<a href="#info">Test</a>
</div>
</div>
关于html - 我如何使用 hr 获取他父 div 的全宽?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57109658/