Блог

Главная - Вопросы по программированию - Скрыть границу в горизонтальной прокрутке

Скрыть границу в горизонтальной прокрутке

#html #css

#HTML #css — код

Вопрос:

Я хочу показать нижнюю границу в элементе, имеющем активный класс. Но граница не может отображаться, потому что родительский элемент #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>

Есть какие — нибудь идеи по этой проблеме?

Комментарии:

1. добавить в #outer => padding-top: 5 пикселей; padding-bottom: 5 пикселей;

Ответ №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>