Question

我一直在尝试创建一个非常基本的CSS导航栏，包含一个“navbar”容器div，并且在其中一个“logo” div和一个< em>“menu” 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>

Answer 1

导航栏上有一个设定的高度和一个block level元素，强制导航栏换行。

您可以通过多种方式将元素放在同一行上，例如浮动或显示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>

它实际上取决于您的偏好和目标浏览器。

CSS Navbar - 在DIV中定位UL

1 个答案: