Question

我的html中有一些锚标签由于某种原因无效。据我所知，代码没有任何问题，所以我完全不知所措。也许我需要一双新鲜的眼睛来看看它是否有明显的东西我不见了？该网站尚未加载到服务器上，但这里是我遇到问题的代码。

 <div id="navigation">
        <div class="wrapper">
            <div class="right">
                <div class="phone-number">
                    <p>24hr Turn Around Time 1-877-229-9665</p>
                </div>

                <div class="social-media">
                    <a href="https://www.facebook.com/archfitters" target="blank"><img src="images/facebook.png"></a>
                    <a href="https://twitter.com/archfitters" target="blank"><img src="images/twitter.png"></a>
                    <a href="http://www.yelp.com/biz/arch-fitters-portland-4" target="blank"><img src="images/yelp.png"></a>
                </div>
            </div>

            <div class="left">    
                <div class="logo">
                    <a href="/"><img src="images/logo.png"></a>
                </div>

                    <div class="text">
                         <p>Custom Made Orthotics</p> 
                    </div> 
            </div>

            <div class="navbar">
                <nav>
                    <a href="index.html">HOME</a>
                    <a href="services.html">SERVICES</a>
                    <a href="company.html">COMPANY</a>
                    <a href="contactus.html">CONTACT US</a>
                    <a href="news.html">NEWS</a>
                </nav>
            </div>

            <div class="clear"></div>
        </div>
</div>

#header {
    font-family: calibri;   
}

.text {
    text-align:left;
    font-size: 20px;        
} 

.navbar {
    text-align: center;
    font-color: #000000;
    padding: 30px 20px 4px;
}

.phone-number {
    text-align: right;
}

#navigation {
    position: fixed;
    top: 0;
    width: 100%;
    color: #000000;
    height: 80px;
    padding-top: 5px;
    background-color: #ffffff;
    z-index: 1;
}

#navigation a {
    font-size: 20px;
    padding-left: 5px;
    padding-right: 15px;
    color: #000000;
    text-decoration: none;
}

#navigation a:hover {
    color: grey;
} 

.social-media {
    text-align: right;  
    margin-top: 40px;
}

Answer 1

Fiddle，他们似乎确实在工作，因为他们都在工作。

<div class="social-media">
                <a href="https://www.facebook.com/archfitters" target="blank"><img src="images/facebook.png"></a>
                <a href="https://twitter.com/archfitters" target="blank"><img src="images/twitter.png"></a>
                <a href="http://www.yelp.com/biz/arch-fitters-portland-4" target="blank"><img src="images/yelp.png"></a>
            </div>
        </div>

Answer 2

好的，我有一位同事解决了这个问题。将位置更改为相对位置并添加了20的z指数。现在它们正在工作！

锚标签不起作用

2 个答案: