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

时间:2019-03-23 19:25:39

标签: html css width

您好(此处为法式面包) 所以我的问题是元素无缘无故太大了,我想知道如何修复它 我试图更改宽度和内边距,但似乎不起作用 看左上方的块太宽了

我发布了Facebook徽标的CSS,但所有徽标都相同

protected $fillable = [
    'product_code',
    'name',
    'categories_id',
    'wh1_limit_warning',
    'wh2_limit_warning',
    'price',
    'selling_price',
    'user_id'
];

public function warehouse2StockSummary()
{
    return $this->hasMany('App\Warehouse2StockSummaries', 'id', 'product_id');
}   
public function salesItem()
{
    return $this->hasMany('App\Purchaseitems');
}
  .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;

  }

我希望包装盒完全适合徽标

1 个答案:

答案 0 :(得分:0)

您可以尝试一下。

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