Question

我在页面底部的div中有三个社交媒体图片。我把它们放在div的中心但是当我添加链接到图像时，它会将其他图像推开，图像周围的区域也会被链接。

在其他网站上我没有遇到过这个问题所以我不确定发生了什么

由于

 <head>
    <link rel="stylesheet" type="text/css" href="assets/style.css" />
    <link href="assets/hover.css" rel="stylesheet" media="all">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>NolanD</title>
</head>
<body>
    <div id="nav">
        <header>
            <div class="logo">NolanD</div>
            <div id="logo">
            </div>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="Portfolio.html">Portfolio</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </header>
    </div>
    <body>
        <div class="rowone">
        </div>
        <div class="rowtwo">
            <p>
            </p>
        </div>
        <div class="rowthree">
        </div>
        </div>
        <div class="rowfour">
        </div>
        <div class="rowfive">
        </div>
        <div class="rowsix">
            <a href="https://twitter.com/NolanD><img src=" assets/images/twitter.png " height="24 " width="24 " border="0 " class="hvr-bounce-in "> </a>
        <img src="assets/images/linkedin.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
        <img src="assets/images/github-2.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
      </div>
      </body>
And the CSS, where I think the issues is coming from.
            html, body {
                   margin:0;
                  padding:0;
            }
            * {
              margin: 0;
              padding:0;
             }
                   #nav {position:absolute;
                        width:100%;
                      height: 60px;
                       background:#F4F2F2 ;
                       text-align: right; left: 0; top: 0;   }  
                   #nav  a {  font-size:26px; padding: 3px; margin-right:    1rem;   font-family: Roboto;
                      font-weight:100;    }
                    #nav li  {  display: inline-block;    }
                  #nav h1 { text-align: left;  }
                a { color:#1D7090; text-decoration: none; padding: 10rem; transition: .4s;  }
               .logo {
              float: left;
            color: #1D7090;
             font-size: 26px;
              font-family: Roboto;
              font-weight:100; 
               line-height: 31px;
             display: inline-block;
              margin-left: 1rem;
       }
                      body { 
                  background-color:#6A6262;
                    }
                .rowone {
    background-color:#7DB3BF;
    width: 100%;
    height: 600px;                               }
                 .rowtwo {
    text-align: center;
    font-size:72px;
    color:#000000; 
    padding-top: 1rem;
    background-color:#F9F2F2;
    width: 100%;
    height: 540px;  
                 }
             .rowthree {
    background-color:#B34042;
    width: 100%;
    height: 500px;  
           }
             .rowfour {
    background-color:#FF5700;
    width: 100%;
    height: 500px;  
          }
            .rowfive {
    background-color:#DDD39B;
    width: 100%;
    height: 500px;  
              }
              .rowsix{
    background-color:#3E3E3E;
    width: 100%;
    height: 175px;
    text-align:center;
    }   
            .rowsix img { display: block;
    padding-top: 5rem;
    text-align:center;
    display:inline-block;
    margin:5px 15px;        
              }
         @media all and (max-width:600px) {
         .logo { display:none; }
         #nav {text-align: center; }
         }

Answer 1

尝试删除您为第一行链接添加的填充属性：

 a { color:#1D7090; text-decoration: none; padding: 10rem; transition: .4s;  }

顺便说一句：请重新格式化您的代码。这很糟糕:(

超链接图像链接边界

1 个答案: