时间戳

首页 > 解决方案 > 社交图标坏了

html - 社交图标坏了

问题描述

我有一张卡片，上面有社交图标，
一张在另一张下面。
我已经尝试过 inline-block、inline
等所有这些东西。不过，它仍然无法修复。
Inline-flex 有效，但随后它破坏了卡片。请帮忙。如果代码混乱，我很抱歉。这是我的代码。如果您需要更多代码或其他内容，请访问它所在的网站。
谢谢你。

.nyrisoc {
    position:relative;
    letter-spacing: 20px;
    top:270px;
    left:96px;
    margin:0px;
   
  }
  .cardtitle {
    position: relative;
    left: 55px;
    top: 12px;
    text-decoration: underline solid transparent;
    transition: text-decoration 1s ease;
    margin-right: 0 0 0;
    width: 245px;
  }
  
  .center2 {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .cardtitle:hover {
    text-decoration: underline solid Currentcolor;
    cursor: pointer;
  }
  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #cardlink {
    text-decoration: underline solid transparent;
    transition: text-decoration 1s ease;
    cursor:pointer;
  }
  .carddis {
    position: relative;
    top: -68px;
    right: 60px;
    color: gray;
    font-size: 17px;
  }
  .stuffyes {
    position: relative;
    bottom:194px;
  }
  .cardinfo {
    position: relative;
    bottom: 70px;
    left: 70px;
  }
  .allcrds {
    display:inline-table;
    position:relative;
    bottom:-30px;
    right:160px;
  }
  .card {
    width:269px;
    background-color: rgb(44, 44, 44);
    height:330px;
    border-radius:30px;
    font-family:roboto;
    filter: drop-shadow(0 0 0.75rem black);
    position:relative;
    left:20px;
    bottom:90px;
    margin: 27px;
  }
  .cname {
    color:white;
    filter: drop-shadow(0 0 0.75rem black);
    opacity:100%;
    font-family:roboto;
    text-align:center;
    position:relative;
    top:180px;
  }
  .fab {
    color:white;
    cursor:pointer;
    transition: color 1s ease;
  }
  .fab:hover {
    color:gray;
  }
  #cardlink:hover {
    text-decoration: underline solid currentColor;
  }
  .socials {
    position:relative;
    text-align:center;
    top:230px;
    display:inline-flex;
    letter-spacing: 20px;
    left:72px;
    top:270px;
  }
  .desctx {
    color:rgb(196, 192, 192);
    filter: drop-shadow(0 0 0.75rem black);
    text-align:center;
    font-family:roboto;
    position:relative;
    top:305px;
  }
  .pfpy {
    filter: drop-shadow(0 0 0.75rem black);
    width:100px;
    height:100px;
    position:relative;
    border-radius:50px;
  }
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Credits | Discord Noir</title>
        <link rel="stylesheet" type="text/css" href="src/css/main.css">
        <link rel="stylesheet" type="text/css" href="src/css/cred.css">
        <script src="https://kit.fontawesome.com/3bc98b09b4.js" crossorigin="anonymous"></script>
        </head>
        <body>

    <div class="allcrds">
        <!-- Nyria Card -->
        <div class="card" onContextMenu="return false;">
            <div class="nyrisoc" onContextMenu="return false;">
              <div class="discord" onContextMenu="return false;">
                <i class="fab fa-2x fa-discord" onContextMenu="return false;" onclick='window.open("https://discord.com/users/265924886461939712/");return false;'></i>
              </div>
              <div class="github" onContextMenu="return false;">
                <i class="fab fa-2x fa-github" onContextMenu="return false;" onclick='window.open("https://www.github.com/NYRI4");return false;'></i>
              </div>
              
            </div>
            <div class="stuffyes">
            <h2 class="desctx" onContextMenu="return false;"><br /><span onclick='window.open("https://github.com/NYRI4/Discolored");return false;' id="cardlink">Discolored</span></h2>
        <h1 class="cname" onContextMenu="return false;">Nyria</h1>
        <img class="pfpy center2"
          src="https://avatars.githubusercontent.com/u/65369563?v=4"
          draggable="false"
          alt=" Spyglass Logo"
          onContextMenu="return false;"
          />
        </div>
          </div>
        </div>



         <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

        <script href="src/js/main.js">
        </script>
    </body>
</html>

标签： htmlcss

解决方案

尝试这个

.nyrisoc > * {
  width: 20px;
  display: inline-block;
  height: 65px;
}

推荐阅读