我的页面上的twitter图标应与徽标位于同一级别，并且蓝色背景位于其下方。
我已经检查了填充以及问题的任何来源！
这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<!-- set character encoding for the document -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="A description of the page">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" media="screen" href="superfish.css">
<script src="https://use.fontawesome.com/7a86a996d7.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
</head>
<body>
<div id="header">
<p id="headerleft">
<a href="http://www.wdwfantasy.com/" title="Disney Information"><img src="wdwfantasy.png" alt="Disney Information" height="100px" width="105px"></a>
</p>
<p id="headerright">
<a href="http://www.twitter.com/wdwfantasy" target="_blank"><img src="twitter.png" alt="twitter" height="100px" width="105px" </a>
</p>
</div>
<div id="nav">
</div>
</body>
</html>
这是我的CSS
div{
display:block;
}
#header_container {
background: #FFF url(https://images.wdwinfo.com/design/header-bg.jpg);
height: 75px;
zoom: 1;
}
#header{
background: white;
margin: 0 auto;
width: 950px;
height: 110px;
background: #ebf1f6;
background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%);
background: -webkit-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%);
background: linear-gradient(to bottom, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 );
}
#headerright{
float: right;
width: 100px;
height: 50px;
border: 0;
margin: 0;
display: inline;
}
}
#headerleft {
float:left;
width:850px;
background-color: grey;
height:50px;
width: 850px;
}
问题的根源可能是什么？
任何帮助。
最佳答案
在样式上，在}之后有一个额外的#headerright，这将破坏代码。删除它可以使您的浮动广告更贴近徽标。
---> Check external Fiddle <---
关于html - 它的下面应该是我网站标题中的图标？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41884470/