我想要一个带有徽标的导航栏,但是当我添加徽标时,线条看起来不太好！
问题是,当我添加图片时,它就像图片一样,文字不会停留在同一行！不是说换行了,而是文字滑了一会儿它不应该.
body {
background-color: #C8F1BA;
margin: 0px;
}
div#gnb_bg {
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-right: 10px solid black;
}
a.gnb {
background-color: #99FF33;
text-decoration: none;
font-size: 26px;
border-right: 1px solid #448811;
padding-right: 2.5%;
padding-left: 2.5%;
padding-top: 14px;
padding-bottom: 14px;
margin: 0px;
}
img#gnb_logo {
height: 30px;
margin: 10px;
}
nav#gnb {
text-align: center;
background-color: #99FF33;
height: 50px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<div id="gnb_bg">
<a class="gnb" href="../Feedbacks/Feedbacks.html">Feedbacks</a>
<img id="gnb_logo" src="../images/logo.gif" />
</div>
</nav>
</body>
解决方法
对于初学者,我们需要整理你的HTML.
然后看看你的css你的< a>如果你正在使用填充等,你需要使它成为块级元素.
从您的导航中删除高度50px,这不是您想要给予高度的东西.而是使用< a>的填充.为了获得理想的高度,它有助于提供响应.
但是因为我们希望它坐在您的图像旁边使用内联块
也不要使用CSS来定义标签的高度和宽度,你应该使用标签属性,以便渲染顺利进行.
您还需要在图像上使用alt.
您的图像还需要以下css规则：
img#gnb_logo { vertical-align:middle; margin:0 10px; }
这样它就可以按照您希望的方式放置在链接旁边.
此外,如果这是您网站的徽标,则不应位于< nav>内.
如果它是相对于链接的图标,则代替使用< img>使用背景图像
body {
background-color: #C8F1BA;
margin: 0px;
}
ul,li {
list-style: none;
}
div#gnb_bg {
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-right: 10px solid black;
}
a.gnb {
background-color: #99FF33;
text-decoration: none;
font-size: 26px;
border-right: 1px solid #448811;
padding-right: 2.5%;
padding-left: 2.5%;
padding-top: 14px;
padding-bottom: 14px;
margin: 0px;
display: inline-block;
}
img#gnb_logo {
vertical-align:middle;
margin:0 10px;
}
nav#gnb {
text-align: center;
background-color: #99FF33;
}
<header>
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<ul id="gnb_bg">
<li>
<a class="gnb" href="../Feedbacks/Feedbacks.html">Feedbacks</a>
<img id="gnb_logo" src="../images/logo.gif" height="30" alt="GNB logo" />
</li>
</ul>
</nav>
</header>
