Question

我正在使用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代码的必要部分。先感谢您。

Answer 1

最简单的解决方案是反转链接上的p和a。然后你可以调整段落（.footerlink）上的边距和填充，链接和文本一样长。

e.g。

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

Answer 2

而不是

<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>有一些默认填充，因此没有文本的区域也会变为可点击。

Answer 3

在这个课程中，你给予15px的保证金。

import java.io.IOException;
import java.net.InetSocketAddress;
import java.net.Socket;
import java.net.UnknownHostException;

public class InternetAvailabilityChecker
{
    public static boolean isInternetAvailable() throws IOException
    {
        return isHostAvailable("google.com") || isHostAvailable("amazon.com")
                || isHostAvailable("facebook.com")|| isHostAvailable("apple.com");
    }

    private static boolean isHostAvailable(String hostName) throws IOException
    {
        try(Socket socket = new Socket())
        {
            int port = 80;
            InetSocketAddress socketAddress = new InetSocketAddress(hostName, port);
            socket.connect(socketAddress, 3000);

            return true;
        }
        catch(UnknownHostException unknownHost)
        {
            return false;
        }
    }
}

Answer 4

您的行为听起来像.footerlink { font-size: 14px; vertical-align: center; margin-right: 15px; display: inline; }的标准行为，它是元素的“内部”空白（在内容和边框之间）。 padding，正如您使用它一样，是边界外的空格，因此不应该是链接元素的一部分。

您的情况可能是您在a元素内部的span元素中添加了边距，因此在某些浏览器中被视为“属于”链接。将margin属性移动到a元素（margin）本身而不是其子元素（#footerlinks a）。

See here

为什么我的页脚中的链接包括边距？

4 个答案: