Question

我想在具有活动类的项目中显示边框底部。但是边框无法显示，因为父元素 #outer 使用 overflow:hidden 这种用法用于水平滚动。

这是我的 HTML 代码

#outer {
    width: 100%;
    white-space: nowrap;
  overflow: hidden;
    display: inline-block;
}
#inner:first-child {
    margin-left: 0;
}

#number .active {
    color: #000000 !important;
  border-bottom: 1px solid #FF0000
}

#number a {
    width: 34px;
    height: 34px;
    padding: 5px;
    margin: 5px;
    color: #c4c4c4;
    font-size: 18px;
    text-decoration: none;
}

<div id="number" class="col col-md-10">
  <div id="outer">
    <div id="inner"><a href="#" class="active">
        1
      </a><a href="#">
        2
      </a><a href="#">
        3
      </a>
      </div>
  </div>

</div>

对这个问题有什么想法吗？

Answer 1

您可以添加如下所示的 padding-bottom。不过，这真的取决于您的用例。

#outer {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  padding-bottom: 0.5rem;
}

#inner:first-child {
  margin-left: 0;
}

#number .active {
  color: #000000 !important;
  border-bottom: 1px solid #FF0000
}

#number a {
  width: 34px;
  height: 34px;
  padding: 5px;
  margin: 5px;
  color: #c4c4c4;
  font-size: 18px;
  text-decoration: none;
}

<div id="number" class="col col-md-10">
  <div id="outer">
    <div id="inner"><a href="#" class="active">
        1
      </a><a href="#">
        2
      </a><a href="#">
        3
      </a>
      </div>
  </div>
</div>

您还可以使用 inline-grid 来确保正确清除项目。

#outer {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: inline-grid;
}

#inner:first-child {
  margin-left: 0;
}

#number .active {
  color: #000000 !important;
  border-bottom: 1px solid #FF0000
}

#number a {
  width: 34px;
  height: 34px;
  padding: 5px;
  margin: 5px;
  color: #c4c4c4;
  font-size: 18px;
  text-decoration: none;
}

<div id="number" class="col col-md-10">
  <div id="inner"><a href="#" class="active">
      1
    </a><a href="#">
      2
    </a><a href="#">
      3
    </a>
  </div>
</div>

水平滚动中的边框隐藏

1 个答案: