html锚标记穿过屏幕

时间:2015-10-15 14:55:15

标签: javascript html css angularjs anchor

我正在创建一个基本的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>
&#13;
&#13;
&#13;

我可以尝试过这么多次 - 摆脱扩展的锚标签,但我尝试的一切都没有用。

我已尝试通过CSS编辑锚标记但它仍然无法正常工作 它也只是一小段代码,所以我不明白为什么它会在整个屏幕中间过半。有人可以帮忙吗?

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

1 个答案:

答案 0 :(得分: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