如果您查看标题,我会在右侧显示电话号码和电子邮件。现在由于某种原因,两者之间有这个空间,我完全不知道这个空间来自哪里?
我没有填充或高度设置,网页检查员只是没有为我显示。
<html>
<head>
<title>www.WebDesignGuy.com || Professional Website Design and Website Development Services</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-sm-6" id="logo_container">
<img src="img/logo.png" id="top_logo">
</div>
<div class="col-sm-6" id="cta_header_box">
<div id="telephone">
<img src="img/telephone_icon.png">
<p>085 816 2252</p>
</div>
<div id="email">
<img src="img/email_icon.png">
<p>info@webdesignguy.com</p>
</div>
</div>
</div>
</div>
</header>
<nav>
<div class="container">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="">Services</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</nav>
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
CSS
* {
margin: 0;
font-family: source sans pro;
}
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
overflow: hidden;
}
/******* HEADER ****************** */
header {
background-color: #057bad;
padding-bottom: 10px;
}
header p {
color: white;
}
header #telephone {
margin-top: 10px;
font-size: 31px;
font-weight: 400;
text-align: right;
}
header #telephone p {
display: inline;
}
header #telephone img {
position: relative;
bottom: 5px;
margin-right: 5px;
}
header #email {
font-size: 16px;
text-align: center;
text-align: right;
}
header #email p {
display: inline;
}
header #email img {
position: relative;
left: 3px;
bottom: 3px;
margin-right: 10px;
}
#top_logo {
margin-top: 20px;
}
#cta_header_box {
text-align: right;
}
/******* HEADER ****************** */
nav {
background-color: #036994;
padding: 5px 0;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
display: inline;
}
nav li a {
color: white;
text-decoration: none;
margin-right: 30px;
font-size: 1.2em;
}
nav li ahover {
text-decoration: none;
color: #057bad;
}
答案 0 :(得分:0)
这个空间是因为你正在使用p标签为P设置边距0 p {余量:0;}
答案 1 :(得分:0)
由于某种原因,内联元素之间有空格。
我建议寻找here的解决方案。
您也可以在img标签上使用display:inline-block;
请在下次附上小提琴。