个人中心
gpt4 book ai didi

html - 导航栏 float 切断标题边框底部(CSS)

转载 作者：太空宇宙 更新时间：2023-11-04 05:43:18 25 4
gpt4 key购买 nike

我正在从事一个有几个限制的学校元素:仅 CSS(无 JS)和严格的部分描述。思路如下:

top left header w/ image                                     top right navbar 
header border bottom covering width of page

我已经成功pushed the navbar to its correct position at the top right of the page

不幸的是，这已经切断了跨越页面宽度的边框底部，并且没有多少抽动它可以让我保留两者。

代码:

header {
	border-bottom: 2px solid blue;
	padding-top: 12px;
	position: absolute;
}

body {
	background-color: white;
}

nav {
	float:right;
	position: relative;
	text-align: right;
	list-style: none;
}

nav li {
	display: inline;
	padding: 10px;
}


#container {
	background-color: white; 
	width: 1200px;
}
<!DOCTYPE html>
<html>
<head>
	<title>Final Project v2</title>
	<link rel="stylesheet" href=style.css />
</head>
<body>
	<header>
		<a href=""><img src="img/logo.gif" alt="Logo"></a>
	</header>

	<nav role="navigation">
		<ul class="nav-main">
			<li><a href="/">Home</a></li>
			<li><a href="/">Books</a></li>
			<li><a href="/">About</a></li>
			<li><a href="/">Contact</a></li>
		</ul>
	</nav>

	<div id="container">

	</div>


</body>
</html>

一定有什么非常明显的东西我错过了，我正在失去理智。有什么建议么？

最佳答案

只需将 logo 和 nav 包裹在 header 上，并将 header 更改为使用 flex。

固定代码

header {
  border-bottom: 2px solid blue;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body {
  background-color: white;
}

nav {
  list-style: none;
}

nav li {
  display: inline;
  padding: 10px;
}

#container {
  background-color: white;
  width: 1200px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Final Project v2</title>
  <link rel="stylesheet" href=style.css />
</head>

<body>
  <header>
    <a href=""><img src="img/logo.gif" alt="Logo"></a>

    <nav role="navigation">
      <ul class="nav-main">
        <li><a href="/">Home</a></li>
        <li><a href="/">Books</a></li>
        <li><a href="/">About</a></li>
        <li><a href="/">Contact</a></li>
      </ul>
    </nav>
  </header>

  <div id="container">

  </div>


</body>

</html>

关于html - 导航栏 float 切断标题边框底部(CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58942727/

25 4 0
文章推荐： javascript - 脚本不显示原始图像
文章推荐： linux - RealTek 8168(r8169 Linux 驱动程序)- Rx 描述符环混淆
文章推荐： python - 我可以使用 pygtk 为 fedora 编写 GUI 吗？
文章推荐： css - 如何使用剪辑路径和 dashoffset 为自定义 SVG 设置动画？