个人中心
gpt4 book ai didi

html - 导航栏与 Logo 对齐

转载 作者：行者123 更新时间：2023-11-28 06:04:44 24 4
gpt4 key购买 nike

我希望我的导航栏横跨整个屏幕宽度(导航栏左侧有一 block 白色)。我还希望标签居中。谁能帮我这个？我是初学者，所以请彻底解释。我还想将我的 Logo 放在导航栏的左侧，有谁知道如何将其放在那里以及显示我的 Logo 需要多少像素，谢谢。

这是我的 html 代码。

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet">
<title>Connection InterFace</title>
<ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
</ul>
</head>

<body>
</body>

<footer>
</footer>

这是我的 CSS。

body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:red;
}
li {
  float: left;
}
  li a {
  display: block;
  color: white;
  text-align: center;
  padding: 22px 24px;
  text-decoration: none;
}
  li a:hover {
  background-color:maroon;
}
ul {
  position:fixed;
  top:0;
  width:100%;
}
.active {
  background-color:black;

最佳答案

之所以有空格，是因为浏览器有默认的边距和填充。所以你通过做一个“CSS重置”来删除填充。我刚刚展示了一种删除所有内容的填充和边距的基本方法。现在您可以根据需要设置自己的自定义填充和边距。

我不知道你是否知道，但我想说浏览器带有默认的“用户代理”样式。例如，大多数浏览器的默认字体大小为 16px，但您可以像填充和边距一样覆盖它。在你的情况下，我相信 body 有 8px 的边距。

*{
  margin: 0;
  padding: 0;
}
body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:red;
}
li {
  float: left;

}
  li a {
  display: block;
  color: white;
  text-align: center;
  padding: 22px 24px;
  text-decoration: none;
}
  li a:hover {
  background-color:maroon;
}
ul {
  position:fixed;
  top:0;
  width:100%;
}
.active {
  background-color:black;
}
.logo{
	display: inline-block;
	width: 20%;
	background: orange;
	padding: 22px 24px;
}
<ul>
  <li class = "logo"><div >LOGO</div></li>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>

这是一个演示，通过使用 li:nth-child(2) a{ 在导航元素周围移动，使其更居中
左边距:50px；
 .. 这不是最好的方法，但它是一种无需更改 HTML 设置的好方法。

*{
	margin: 0;
	padding: 0;
}
body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:red;
}
li {
  float: left;

}
  li a {
  display: block;
  color: white;
  text-align: center;
  padding: 22px 24px;
  text-decoration: none;
}
  li a:hover {
  background-color:maroon;
}
li:nth-child(2) a{
	margin-left: 50px ;
}
ul {
  position:fixed;
  top:0;
  width:100%;
}
.active {
  background-color:black;
}
.logo{
	display: inline-block;
	width: 20%;
	background: orange;
	padding: 22px 24px;
}
<ul>
  <li class = "logo"><div >LOGO</div></li>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>

我在下面添加了如何显示 Logo 的图像，我喜欢使用背景图像，因为我们可以使用 background-size: cover; 有助于在某些地方显示图像。

*{
	margin: 0;
	padding: 0;
}
body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:red;
}
li {
  float: left;

}
  li a {
  display: block;
  color: white;
  text-align: center;
  padding: 22px 24px;
  text-decoration: none;
}
  li a:hover {
  background-color:maroon;
}
li:nth-child(2) a{
	margin-left: 50px ;
}
ul {
  position:fixed;
  top:0;
  width:100%;
}
.active {
  background-color:black;
}
.logo{
	/*display: inline-block;*/
	width: 20%;
	background: orange;
	/*padding: 22px 24px;*/
}
.logo div{
	background: url("http://placehold.it/100x100/ff66cc/ffffff&text=IMAGE") no-repeat center center ;
	background-size: cover;
	height: 65px;
}
<ul>
  <li class = "logo"><div></div></li>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>

关于html - 导航栏与 Logo 对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36525700/

24 4 0
文章推荐： javascript - 通过单击 Vimeo 中的屏幕来禁用视频停止
文章推荐： c++ - 从 DLL 调用函数时 MFC 断言错误
文章推荐： javascript - Navgoco 不是影响密码保护页面的功能
文章推荐： Javascript:保存和恢复样式状态在 IE 中不起作用？