如何在不影响其内容的情况下调整元素的宽度

Question

你好（Baguette英文在这里）所以我的问题是，一个元素太大无缘无故我想知道如何修复它我试图改变宽度和填充，但它似乎没有workLook左上角块太宽了

我发布了facebook徽标的CSS，但对所有这些都是一样的

  .reslogo  {
  position: fixed;
  z-index: 200;
  top: 0px;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  color:#fcecd9;
  width: auto;

}



  .facebook{
    left: 0%;
    top:-10%;
    animation-name: logofb;
    animation-duration: 0.5s;
    animation-delay: 7.5s;
    animation-fill-mode: forwards;
    transition-property: top;
    -webkit-transition: .3s ease-in-out;
   transition: .3s ease-in-out;
}

  @keyframes logofb  {
    from {top:-10%;}
    to {top: 0%;}
  }

  .facebook:hover {
    margin-top: 2%;
    box-shadow: 10px 5px 5px black;

  }

<span class="facebook reslogo"><img src=facebook.png height="13%" width="13%"></span>
<span class="twitter reslogo"><img src=twitter.png height="13%" width="13%"></span>
<span class="devart reslogo"><img src=devart.png height="13%" width="13%"></span>
<span class="twitch reslogo"><img src=twitch.png height="13%" width="13%"></span>

我希望盒子与徽标完美契合

Answer 1

你可以试试这个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="container-icons">
        <i class="fab fa-facebook-f icon"></i>
        <i class="fab fa-twitter icon"></i>
        <i class="fab fa-twitch icon"></i>   
    </div>

</body>
</html>

 *
{
    margin: 0;
    padding: 0;
}

.container-icons
{
    background: #333;
    display: flex;
    height: 30px;
}

.icon
{
    color: #FFF;
    font-size: 20px;
    padding: 5px;
}

Result

如何在不影响其内容的情况下调整元素的宽度

问题描述投票：0回答：1

1个回答

最新问题

如何在不影响其内容的情况下调整元素的宽度

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1