html - CSS Navbar - 在 DIV 中定位 UL-6ren

html - CSS Navbar - 在 DIV 中定位 UL

转载作者：太空宇宙更新时间：2023-11-04 01:20:32

25

4

我一直在尝试创建一个非常基本的 CSS 导航栏，它由一个 “navbar” 容器 div 以及其中的一个 “logo” div 和一个 < em>“菜单” 分区。

但是，我似乎遇到了一些麻烦，无法将 “菜单” div(包含无序列表的链接)嵌套在 “导航栏” 中容器分区。

也许我遗漏了一些非常简单的东西，但我已经尝试进行一些谷歌搜索，但似乎无法找到解决此问题的方法。

我确实看到了一个教程，该教程展示了如何仅使用无序列表创建类似类型的导航栏，但考虑到我也希望在导航栏中有一个 Logo 和可能的其他元素，我认为这不是我在找什么。

请参阅下面我一直在使用的 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>

最佳答案

您在导航栏上设置了高度，并设置了一个 block level元素，强制导航栏换行。

有很多方法可以让元素位于同一行，例如 float 或显示 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；这实际上仅取决于您的偏好和目标浏览器。

关于html - CSS Navbar - 在 DIV 中定位 UL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49178552/

25

4

0

文章推荐： python - OpenERP 名称错误 : name '_date_of_q_created' is not defined

文章推荐： c - 如何找到 while 循环的时间复杂度(Big O)？

文章推荐： javascript - 尝试使用expressJs获取特定用户时出错

jQuery:仅选择 ul，而不选择 ul ul
我正在尝试使用 jQuery 来提交一个基本的 Accordion 样式菜单。这是菜单: http://www.cybart.com/bscg/ 这是为其提供 Accordion 功能的代码片段:
html - 增加嵌套 (ul ul ul li) 下拉导航列表项的宽度
这是我的网站: http://www.simply-a-christian.com/index.html 在导航栏上，如果您移动到: 信念玛丽安教义您可以看到每个 Marian Dogma(列出了
jquery - 当 ul ul 活跃时 ul parent 移动
这可能是一个很容易回答的问题，但是，我找不到解决方案。我已经建立了一个非常简单的菜单，每当我将鼠标悬停在 ul 父项上时，它的子项 ul ul 就会变得可见。基本上它是有效的，但 parent 让位于
HTML 下拉菜单 : "nav ul ul ul li" Too Low
这是一张图片: 问题是(你可以看到):“页面”按钮太低，无法点击。我想要的是它应该靠近“联系人”。现在是代码: HTML Home About
jquery - 如何在不破坏每个

首页

博学

6Ren·AI

商城

html - CSS Navbar - 在 DIV 中定位 UL