CSS导航栏-在DIV中定位UL
[英]CSS Navbar - Positioning UL within a DIV
问题描述
我一直在尝试创建一个非常基本的CSS导航栏，该导航栏由“ navbar”容器div组成，并在其中包含“徽标” div和“菜单” div。
但是，我似乎在使“菜单” div（包含无序链接列表）嵌套在“ navbar”容器div中时遇到了一些麻烦。
也许我错过了一些非常简单的东西，但是我尝试了一些谷歌搜索，但似乎找不到解决此问题的方法。
我确实看到了一个教程，该教程显示了如何仅使用无序列表创建类似类型的导航栏，但是鉴于我还希望在导航栏中具有徽标和可能的其他元素，因此我认为这不是我想要的。我在寻找。
请参阅下面有关我一直在使用的HTML和CSS的信息。 任何帮助将不胜感激。
谢谢！
body{ padding: 0px; margin: 0px; } .navbar{ height: 50px; width: 100%; background: #b4cef7; } .logo{ padding-top: 7px; padding-left: 10px; width: 50px; padding-right: 0px; margin-right: 0px; } .navbar ul{ list-style-type: none; } .navbar ul li{ float: left; height: 100%; width: 50px; margin: 10px; background-color: white; border: 1px solid black; } .navbar ul li a{ text-decoration: none; color: black; }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Simple CSS Navbar</title> <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="navbar"> <div class="logo"> <i class="fas fa-coffee fa-2x"></i> </div> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2018-03-08 17:08:27
您在导航栏上设置了高度，并设置了块级元素，将导航栏强制到了新行。
您可以通过多种方式将元素放在同一行上，例如浮动或显示inline-block 。
这是使用inline-block的简单演示：
body { padding: 0px; margin: 0px; } .navbar { height: 50px; width: 100%; background: #b4cef7; } .navbar>* { display: inline-block; vertical-align: top; } .logo { padding-top: 7px; padding-left: 10px; width: 50px; padding-right: 0px; margin-right: 0px; } .navbar ul { list-style-type: none; padding: 0; margin: 0; } .navbar ul li { float: left; height: 100%; width: 50px; margin: 10px; background-color: white; border: 1px solid black; } .navbar ul li a { text-decoration: none; color: black; }
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" /> <div class="navbar"> <div class="logo"> <i class="fas fa-coffee fa-2x"></i> </div> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div>
通常不应该使用inline-block ，float或flexbox选项。 它实际上仅取决于您的偏好和目标浏览器。
CSS在div中定位div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.