问题是,当我添加图片时,它就像图片一样,文字不会停留在同一行！不是说换行了,而是文字滑了一会儿它不应该.
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 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 href="../Feedbacks/Feedbacks.HTML">Feedbacks</a> <img ID="gnb_logo" src="../images/logo.gif" height="30" alt="GNB logo" /> </li> </ul> </nav></header>总结
以上是内存溢出为你收集整理的html – 导航栏中的徽标和文本对齐方式全部内容，希望文章能够帮你解决html – 导航栏中的徽标和文本对齐方式所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）