爲什麼我的頁腳中的鏈接包括頁邊距？

我正在使用Notepad ++練習我的HTML和CSS技巧，並且當我將幾個鏈接添加到頁腳時遇到了問題。我遇到的問題是每個鏈接都包含15px的邊距右值（即每個鏈接之間的空白可以點擊）。我想只能點擊文字來指引我到那個特定的頁面。爲什麼我的頁腳中的鏈接包括頁邊距？

這裏是頁腳我的HTML代碼：

<body> 
    <div id="footer"> 
     <div id="footerlinks"> 
      <a href="index.html"> 
       <span style="color: #FFFFCC"> 
        <p class="footerlink"> 
         HOME 
        </p> 
       </span> 
      </a> 
      <a href="about.html"> 
       <p class="footerlink"> 
        ABOUT 
       </p> 
      </a> 
      <a href="rooms.html"> 
       <p class="footerlink"> 
        ROOMS 
       </p> 
      </a> 
      <a href="divesite.html"> 
       <p class="footerlink"> 
        DIVE SITE 
       </p> 
      </a> 
      <a href="food.html"> 
       <p class="footerlink"> 
        FOOD 
       </p> 
      </a> 
      <a href="news.html"> 
       <p class="footerlink"> 
        NEWS 
       </p> 
      </a> 
      <a href="contact.html"> 
       <p class="footerlink"> 
        CONTACT 
       </p> 
      </a> 
     </div> 
    </div> 
</body>

這裏是我的頁腳CSS：

#footer { 
    width: 100%; 
    height: 50px; 
    background-color: #999999; 
    border-bottom: 1px solid black; 
    padding-right: 20px; 
    padding-left: 20px; 
    clear: both; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

#footerlinks { 
    height: 100%; 
    line-height: 45px; 
    display: inline-block; 
    float: left; 
} 

#footerlinks a { 
    color: #333333; 
} 

#footerlinks a:link { 
    text-decoration: none; 
} 

#footerlinks a:hover { 
    color: #FFFFCC; 
} 

.footerlink { 
    font-size: 14px; 
    vertical-align: center; 
    margin-right: 15px; 
    display: inline; 
}

這裏是我的jsfiddle - https://jsfiddle.net/vu4qg17c/2/

我只包括了JSFiddle中的HTML和CSS代碼的必要部分。先謝謝你。

來源

2015-06-13 Jayesh

而不是

<a href="about.html"> 
    <p class="footerlink"> 
      ABOUT 
    </p> 
</a>

反轉的<a>位置和<p>

<p class="footerlink"> 
    <a href="about.html">   
      ABOUT 
    </a> 
</p>

做相同的所有其他人。

寫作<a>之前<p>使整個<p>作爲一個鏈接。而且，由於<p>有一些默認填充，所以沒有文本的區域也可以點擊。

來源

2015-06-13 10:36:35 prakhar19

最簡單的解決方案將顛倒您的鏈接p和a。然後，您可以調整段落的邊距和填充（.footerlink），鏈接與文本一樣長。

例如

<p class="footerlink"> 
<a href="rooms.html"> 
ROOMS 
</a> 
</p>

來源

2015-06-13 10:33:41 pBuch

在這個類中，您給出的邊距爲15px。

.footerlink { 
    font-size: 14px; 
    vertical-align: center; 
    margin-right: 15px; 
    display: inline; 
}

來源

2015-06-13 10:35:03 Aabid

你的行爲聽起來像標準的行爲padding，這是元素（內容和邊框之間）的空白「內部」。 margin，正如您使用的那樣，是邊界外的空格，因此不應該是鏈接元素的一部分。

你的情況的問題可能是你在a元素內部的span元素上添加了餘量，因此被視爲「屬於」某個瀏覽器中的鏈接。將邊距屬性移至a元素（#footerlinks a）本身，而不是其子元素（.footerlink）。

See here

來源

2015-06-13 10:35:17

爲什麼我的頁腳中的鏈接包括頁邊距？

回答

相關問題