html - CSS/HTML 导航和 Logo 在同一行

标签 html css navigation

我不知道如何将它们放在同一条线上。

http://codepen.io/anon/pen/dovZdQ

<body>
    <div class="navigation-bar">
        <div id="navigation-container">
            <img src="logo.png"> 
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Get in Touch</a></li>
            </ul>
        </div>
    </div>
</body>

最佳答案

<ul>默认情况下是 block 元素,将其设为 inline-block相反:

.navigation-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: center;
  display:inline-block;
  vertical-align:top;
}

CodePen Demo

关于html - CSS/HTML 导航和 Logo 在同一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30624709/

相关文章:

jquery - 如何让隐藏的描述文本在显示时将内容向上推

html - Chrome 打印错误 - 在页面顶部错误地打印表格标题

css - 未捕获的语法错误 : Invalid or unexpected token @import css

java - 如何设置“导航”和“当前 Activity ”的“返回”选项

jquery - IE8中的CSS定位令人头疼

javascript - 如何获取名称在 Javascript 中已知的元素的 ID

html - 最大高度 - 按比例拉伸(stretch) - 不收缩 - 以适应容器,这可能吗?

c# - 使用 ASP.NET MVC 中的按钮处理页面操作的正确方法?

ios - Segue/Push 上隐藏的导航栏 (Swift)

html - 如何摆脱火狐图像边框