色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

我如何讓我的兩個元素更接近

CSS
錢瀠龍2年前9瀏覽0評論

我正試圖讓頁腳信息和社會聯系更加緊密。我注意到問題的一部分是，由于某種原因，socials錨上的大小是18 x 133，當我通過更改。social是一個風格類，它將圖標推送到網站的白色部分。任何幫助都將不勝感激。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.top-container{
    padding: 200px;
}

.showcase {
    background-color: rgb(39,43,51);
    width: max-content;

}

.showcase-inner {
    margin: 0;
    padding-top: 30px;
    padding-bottom: 30px;
}

.footer { 
    background-color: rgb(32,35,41);
    font-size: 100px;
    padding-top: 30px;
}

h1{
    font-size: 95px;
    text-align: center;
    font-weight: 1000;
    color: rgb(32,35,41);
}


main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    overflow-x: hidden;
}

.image-container{
    display: flex;
}

.image-container img{
    width: 229.2px;
    height: 220px;
    border-radius: 25px;
}

article{
    padding: 10px;
}

.character-card{
    display: flex;
    margin: 13.5px;
    background-color: rgb(60,62,68);
    border-radius: 25px;
    box-shadow: 0 0 10px rgba(37, 37, 37, 0.5);
}

.character-info{
    display: flex;
    flex-direction: column;
    padding: 13.5px;
    position: relative;
}

.section{
    display: flex;
    flex-direction: column;
    width: 330px;
    height: 64.33px;
    color: rgb(245,245,245);
}

.greytext{
    color: rgb(158,158,158);
}

.navbar {
    background-color: #ffffff;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

.navbar li {
    float: left;
}

.navbar li a {
    display: block;
    color: #333;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: color 0.2s;
}

.content-links{
    margin-left: auto;
    padding: 10px;
    margin-right: 10px;
    font-size: 20px;
    font-weight: 750;
}

.content-links a:hover{
    color: rgb(255,152,0);
}

.homebutton{
    margin-right: auto;
}

.homebutton img{
    width: 50px;
    height: 50px;
}

.status {
    display: flex;
    align-items: center;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}
  
.status-dot.grey {
    background-color: rgb(158,158,158);
}
  
.status-dot.red {
    background-color: rgb(214,61,46);
}
  
.status-dot.green {
    background-color: rgb(85,204,68);
}
  
.about-content{
    display: flex;
    flex-direction: column;
    padding: 5px;
    margin-left: 500px;
    margin-right: 500px;
    font-size: 110%;
    color: rgb(66,66,66);
}

.abouth2 {
    font-size: 35px;
    font-weight: 800;
    margin-bottom: 30px;
    color: rgb(32,35,41);
}

.abouth3 {
    font-size: 25px;
    font-weight: 800;
    margin-top: 10px;
    margin-bottom: 10px;
    color: rgb(32,35,41);
}

.ablink {
    text-decoration-color: rgb(255,152,0);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    color: rgb(66,66,66);
}

.ablink:hover {
    text-decoration: none;
    color: rgb(255,152,0);
    transition: color 0.2s;
}

.footer-info {
    display: flex;
    justify-content: center;
    list-style: none;
    padding-top: 40px;
    margin: 0;
    font-size: 15px;
    font-weight: 750;
    color: rgb(158, 158, 158);
}

.footer-info li {
    margin-right: 20px;
}

.socials {
    display: flex;
    justify-content: center;
    align-items: center;
}

.socials a {
    margin: 10px;
}

.socials a:hover svg path {
    fill: rgb(255, 152, 0);
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Rick and Morty API</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <ul class="navbar">
            <li class="homebutton"><a href="landing.html"><img src="RMAPI-homepagebutton.png" alt="Home"></a></li>
            <li class="content-links"><a href="about.html">About</a></li>
        </ul>
        <div class="top-container">
            <h1>The Rick and Morty API</h1>
        </div>
        <div class="showcase">
            <div class="showcase-inner">
                <main></main>
            </div>
        </div>
        <div class="footer">
            <ul class="footer-info">
                <li>CHARACTERS: 826</li>
                <li>LOCATIONS: 126</li>
                <li>EPISODES: 51</li>
            </ul>
            
              <div class="socials">
                <a >
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="social-icon" style="fill: rgb(158, 158, 158);">
                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                  </svg>
                </a>
              
                <a >
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="social-icon" style="fill: rgb(158, 158, 158);">
                    <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
                  </svg>
                </a>
              
                <a >
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="social-icon" style="fill: rgb(158, 158, 158);">
                    <path d="M12 4.419c-2.826-5.695-11.999-4.064-11.999 3.27 0 7.27 9.903 10.938 11.999 15.311 2.096-4.373 12-8.041 12-15.311 0-7.327-9.17-8.972-12-3.27z"/>
                  </svg>
                </a>
              </div>
              
        </div>
        <script src="script.js"></script>
    </body>
</html>

看起來像是。社交網站占據了太多的空間。如果使用display:flex，它會縮小到正確的大小。

我還在我的文本片段中保留了邊框顏色。這通常是找到罪魁禍首的一個有用的方法(除了開發工具之外)。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.top-container{
    padding: 200px;
}

.showcase {
    background-color: rgb(39,43,51);
    width: max-content;

}

.showcase-inner {
    margin: 0;
    padding-top: 30px;
    padding-bottom: 30px;
}

.footer { 
    background-color: rgb(32,35,41);
    font-size: 100px;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    border: blue solid;
}

h1{
    font-size: 95px;
    text-align: center;
    font-weight: 1000;
    color: rgb(32,35,41);
}


main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    overflow-x: hidden;
}

.image-container{
    display: flex;
}

.image-container img{
    width: 229.2px;
    height: 220px;
    border-radius: 25px;
}

article{
    padding: 10px;
}

.character-card{
    display: flex;
    margin: 13.5px;
    background-color: rgb(60,62,68);
    border-radius: 25px;
    box-shadow: 0 0 10px rgba(37, 37, 37, 0.5);
}

.character-info{
    display: flex;
    flex-direction: column;
    padding: 13.5px;
    position: relative;
}

.section{
    display: flex;
    flex-direction: column;
    width: 330px;
    height: 64.33px;
    color: rgb(245,245,245);
}

.greytext{
    color: rgb(158,158,158);
}

.navbar {
    background-color: #ffffff;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

.navbar li {
    float: left;
}

.navbar li a {
    display: block;
    color: #333;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: color 0.2s;
}

.content-links{
    margin-left: auto;
    padding: 10px;
    margin-right: 10px;
    font-size: 20px;
    font-weight: 750;
}

.content-links a:hover{
    color: rgb(255,152,0);
}

.homebutton{
    margin-right: auto;
}

.homebutton img{
    width: 50px;
    height: 50px;
}

.status {
    display: flex;
    align-items: center;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}
  
.status-dot.grey {
    background-color: rgb(158,158,158);
}
  
.status-dot.red {
    background-color: rgb(214,61,46);
}
  
.status-dot.green {
    background-color: rgb(85,204,68);
}
  
.about-content{
    display: flex;
    flex-direction: column;
    padding: 5px;
    margin-left: 500px;
    margin-right: 500px;
    font-size: 110%;
    color: rgb(66,66,66);
}

.abouth2 {
    font-size: 35px;
    font-weight: 800;
    margin-bottom: 30px;
    color: rgb(32,35,41);
}

.abouth3 {
    font-size: 25px;
    font-weight: 800;
    margin-top: 10px;
    margin-bottom: 10px;
    color: rgb(32,35,41);
}

.ablink {
    text-decoration-color: rgb(255,152,0);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    color: rgb(66,66,66);
}

.ablink:hover {
    text-decoration: none;
    color: rgb(255,152,0);
    transition: color 0.2s;
}

.footer-info {
    display: flex;
    justify-content: center;
    list-style: none;
    padding-top: 40px;
    margin: 0;
    font-size: 15px;
    font-weight: 750;
    color: rgb(158, 158, 158);
    border: red solid;
    padding-top: 0px;
}

.footer-info li {
    margin-right: 20px;
}

.socials {
    display: flex;
    padding-top: 0px;
    justify-content: center;
    align-items: center;
    border: yellow solid;
}

.socials a {
    display: flex;
    margin: 10px;
    border: green solid;
}

.socials a:hover svg path {
    fill: rgb(255, 152, 0);
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Rick and Morty API</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <ul class="navbar">
            <li class="homebutton"><a href="landing.html"><img src="RMAPI-homepagebutton.png" alt="Home"></a></li>
            <li class="content-links"><a href="about.html">About</a></li>
        </ul>
        <div class="top-container">
            <h1>The Rick and Morty API</h1>
        </div>
        <div class="showcase">
            <div class="showcase-inner">
                <main></main>
            </div>
        </div>
        <div class="footer">
            <ul class="footer-info">
                <li>CHARACTERS: 826</li>
                <li>LOCATIONS: 126</li>
                <li>EPISODES: 51</li>
            </ul>
            
              <div class="socials">
                <a >
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="social-icon" style="fill: rgb(158, 158, 158);">
                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                  </svg>
                </a>
              
                <a >
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="social-icon" style="fill: rgb(158, 158, 158);">
                    <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
                  </svg>
                </a>
              
                <a >
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="social-icon" style="fill: rgb(158, 158, 158);">
                    <path d="M12 4.419c-2.826-5.695-11.999-4.064-11.999 3.27 0 7.27 9.903 10.938 11.999 15.311 2.096-4.373 12-8.041 12-15.311 0-7.327-9.17-8.972-12-3.27z"/>
                  </svg>
                </a>
              </div>
              
        </div>
        <script src="script.js"></script>
    </body>
</html>