Блог

Главная - Вопросы по программированию - HTML CSS фон обрезается вверху

HTML CSS фон обрезается вверху

#html #css

#HTML #css

Вопрос:

 .footer-bar {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.footer-bar a {
  height: 100vh;
  text-align: center;
  padding: 8px;
  transition: all 0.3s ease;
  color: var(--smlink);
  font-size: 20px;
}
.youtube {
  background: #FF0000;
  color: var(--smlink);
}  
 <div class="footer-socialbar">
    <div class="footer-bar">
        <a href="#" class="sm youtube"><i class="fa fa-youtube fa-2x"></i></a>
        <a href="#" class="sm facebook"><i class="fa fa-facebook fa-2x"></i></a> 
        <a href="#" class="sm twitter"><i class="fa fa-twitter fa-2x"></i></a>
        <a href="#" class="sm spotify"><i class="fa fa-spotify fa-2x"></i></a>
    </div>
</div>

Интересно, как я могу сделать так, чтобы эти кнопки отображались правильно, чтобы цвет отображался по всей ссылке.
Вот как они отображаются на экране.
https://i.stack.imgur.com/2qyeK.png
Я хочу, чтобы им не нравилось, где обрезано вверху, как я могу этого добиться?

Цвет ссылок в названном CSS.YouTube

Размещен только один цвет, потому что остальные точно такие же.

Если кто-нибудь может помочь, было бы здорово … Спасибо

Ответ №1:

Я не уверен, для чего вы используете перевод, поэтому я взял это из приведенного ниже фрагмента, чтобы решить проблему. Теги привязки не отображаются для вас как элементы блока. Если вы поместите их в flexbox и зададите им явный размер, они будут работать. Фрагмент работает, но в нем нет потрясающего шрифта, поэтому вам придется использовать свое воображение для его получения.

 .footer-bar {
    display: flex;
    flex-flow: row wrap;
}
.footer-bar a {
    text-align: center;
    padding: 8px;
    transition: all 0.3s ease;
    color: var(--smlink);
    background: #a33;
    width: 40px;
    height: 40px;
}

.footer-bar a.youtube {
    background: #a33;
}

.footer-bar a.facebook {
    background: #00f;
}

.footer-bar a.twitter {
    background: #ff0;
}

.footer-bar a.spotify {
    background: #00703c;
}  
 <div class="footer-socialbar">
    <div class="footer-bar">
        <a href="#" class="sm youtube"><i class="fa fa-youtube fa-2x"></i></a>
        <a href="#" class="sm facebook"><i class="fa fa-facebook fa-2x"></i></a>
        <a href="#" class="sm twitter"><i class="fa fa-twitter fa-2x"></i></a>
        <a href="#" class="sm spotify"><i class="fa fa-spotify fa-2x"></i></a>
    </div>
</div>