Question

我有这段代码，我想让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>

Answer 1

使内部div为inline-block，并在其底部添加边框

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

Answer 2

@Christian，您好，请尝试此代码，

<style>
.slider-single {
    width:100%;
    white-space: nowrap !important;
    &::-webkit-scrollbar {
        width: 0px;
        background: transparent;
    }
  }

 a {
   text-decoration: none; color:red;
  font-weight: 800; margin-left: 3rem;
 }

 hr {
  background-color: blue;   margin-left:4%;
 }

  .links
 {  width:auto;display:inline-block;}
</style>

  <div class="slider-single">
    <div class="links">
      <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>
  <hr>
    </div>

</div>

我如何使用hr来获取其父div的完整宽度？

2 个答案: