gpt4 book ai didi

html - 在保持当前导航栏定位的同时使标题居中

转载 作者:行者123 更新时间:2023-11-28 11:09:34 24 4
gpt4 key购买 nike

为什么我无法将标题置于该页面的中心?我需要帮助将我的 header 居中,该 header 在此页面上显示为“商店”。需要分开吗?

<!DOCTYPE html>
<html>
<head>
<title>EvenDoper.com</title>
<center>
<img src="ED1.psd" width="719" height="159" alt="ED1">
</center>
<style>
ul {
float: left;
list-style: none;
position: relative;
left: 50%;
}
li {
display: block;
float: left;
position: relative;
right: 65%;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#00a651;
background-color:#FFFFFF;
text-align:center;
padding:0px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#FFFFFF;
}

h1 {color:#FFFFFF;}
h1 {text-align:center;}
h1
{
background-color:#00a651;
}
</style>
</head>
<body>
<ul>
<li><a href="shop.html">&#9889;Shop</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
<br>
<h1>Shop</h1>
</html>

最佳答案

首先,你的语法有很多问题。例如,您需要移动您的 <img> <body> 中的代码代码。您还需要移动 <h1> <body> 底部的代码代码也是如此。看看 Mozilla 的 Introduction to HTML了解有关正确的 HTML 语法和标记的更多信息。

其次,我建议(与社区的其他人一起,最有可能)对于如此多的 CSS 样式,您可以使用外部 CSS 文件。看到这个 JSFiddle 开始改进您的代码。访问 Mozilla 的 CSS developer guide获取有关 CSS 的一些重要而详细的信息。

您的“商店”文本偏离中心有两个原因:

一:因为你有一些 Unresolved float条目进一步向上 CSS . CSS代表 Cascading Style Sheets ,这意味着样式级联从上到下;顺序很重要!如果你float CSS 中任意位置的元素, 你需要 clear它在下一个元素中。否则,从那里开始的所有 CSS 属性都将具有相同的 float。属性应用于他们。

二:您没有为任何 CSS 设置宽度属性,因此文档可能会尝试使用 <img> 的宽度在你的 HTML 中标记,即 719px .这使得“商店”文本以 width: 719px; 为中心, 基本上。我已经在上面的 JSFiddle 链接中添加了这些修复程序,但为了冗余起见,这里是您应该替换 <h1> 的 CSS 代码。代码:

h1 {
clear: both;
width: 100%;
color: #FFFFFF;
text-align:center;
background-color:#00a651;
}

关于html - 在保持当前导航栏定位的同时使标题居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22079357/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com