html 横跨屏幕的锚标签

Question

我正在创建一个基本的 HTML 网站 - 这样做时我注意到我的锚标签 () 一直以黑色背景穿过屏幕 - 这也是一个页脚。

<!DOCTYPE html>
<html ng-app="myApp">
 <head>
  <title>Under construction</title>


  <link rel="stylesheet" style="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" style="text/css" href="app/stylesheets/stylesheet.css">

        <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
        <script src="app/JS/app.js"></script>

 </head>



 <body>


  
 <div class="container">
  <div ng-view>
   
  </div>
 </div>



        <div id="footerDiv" class="footBackground">
<hr>
             <a href="" target="_blank">
                <div ng-init="imgsrc ='app/images/linkedin.png'" ng-mouseover="imgsrc='app/images/linkedinHover.png'" ng-mouseout="imgsrc='/app/images/linkedin.png'">
                    <img ng-src="{{imgsrc}}" width="50" height="50" class="footLinkedIn"></img>
                </div><br />
            </a>

        <a href="" target="_blank"><h5><span>Website created by <br />Adam parker</span></h5></a>
<hr>
        </div>

 </body>
</html>

我可以尝试很多次 - 摆脱扩展锚标签，但我尝试过的一切都不起作用。

我已经尝试通过 CSS 编辑锚标签，但它仍然不起作用这也是一小段代码，所以我不明白为什么它会越过屏幕一半。有人可以帮忙吗？

PS。我已经删除了代码 - 但是在我处理页脚时，所有被删除的代码暂时被注释掉了，我只是想删除太长的锚标记。

Answer 1

您的锚标记包围了整个 div，它正好横跨页面的宽度。把顺序倒过来就好了。

<div ng-init="imgsrc ='app/images/linkedin.png'" ng-mouseover="imgsrc='app/images/linkedinHover.png'" ng-mouseout="imgsrc='/app/images/linkedin.png'">
  <a href="https://uk.linkedin.com/pub/adam-parker/101/29/910" target="_blank">
    <img ng-src="{{imgsrc}}" width="50" height="50" class="footLinkedIn" />
  </a>
</div>

Example here

html 横跨屏幕的锚标签

html anchor tag going across the screen

html

javascript

css

anchor

angularjs