我希望我的 Logo 、描述文本和导航栏都位于网站顶部的同一行。他们不会对齐,我无法为我的生活找出原因。它们都在同一条线上,但描述文字的位置低于其他文字。填充和边距似乎没有什么不同。
/* Title Area */
#title {
float: left;
}
.sep {
padding: 20px;
}
.desc {
padding: 20px 0px;
}
/*Topnav */
.nav-primary {
float: right;
margin-top: 1px;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
display: inline-block;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover {
background-color: floralwhite;
}
<div class="header">
<div id="title">
<p>
<img src="http://i1379.photobucket.com/albums/ah150/beccaday02/blog%20title_zpsi4lf0fqz.png" />
<span class="sep">|</span>
<span class="desc">Help For The Undomesticated Homemaker</span>
</p>
</div>
<nav class="nav-primary">
<ul class="topnav" id="myTopnav">
<li><a href="http://www.nappiesandnailpolish.com/p/start-here.html">Start Here</a>
</li>
<li><a href="http://www.nappiesandnailpolish.com/p/write-for-us.html">Write For Me</a>
</li>
<li><a href="http://www.nappiesandnailpolish.com/p/advertise.html">Advertise</a>
</li>
<li><a href="http://www.nappiesandnailpolish.com/p/contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
最佳答案
.header:after {
content: '';
display: block;
clear: both;
}
#title {
float: left;
}
#title p {
margin: 0;
}
#title p > * {
display: inline-block;
vertical-align: middle;
}
.nav-primary {
float: right;
}
.nav-primary ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav-primary ul li {
float: left;
padding-right: 15px;
line-height: 40px;
}
<div class="header">
<div id="title">
<p>
<img src="http://i1379.photobucket.com/albums/ah150/beccaday02/blog%20title_zpsi4lf0fqz.png" />
<span class="sep">|</span>
<span class="desc">Help For The Undomesticated Homemaker</span>
</p>
</div>
<nav class="nav-primary">
<ul class="topnav" id="myTopnav">
<li><a href="http://www.nappiesandnailpolish.com/p/start-here.html">Start Here</a>
</li>
<li><a href="http://www.nappiesandnailpolish.com/p/write-for-us.html">Write For Me</a>
</li>
<li><a href="http://www.nappiesandnailpolish.com/p/advertise.html">Advertise</a>
</li>
<li><a href="http://www.nappiesandnailpolish.com/p/contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
我已经使用基本设置修改了您的 CSS,将所有内容对齐在一行中,按照您的意愿进行其余修饰
.header:after {
content: '';
display: block;
clear: both;
}
#title {
float: left;
}
#title p {
margin: 0;
}
#title p > * {
display: inline-block;
vertical-align: middle;
}
.nav-primary {
float: right;
}
.nav-primary ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav-primary ul li {
float: left;
padding-right: 15px;
line-height: 40px;
}
关于html - 为什么我的文字与图片不一致?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40060780/