我正在创建一个网站,并且有一些标题/导航问题。我已经将网站居中(正常运行),并且我的标题开始在页面上应该的位置,但是当我向标头添加边框底部时,它可以从该页面开始,但仍在页面的右侧。另外,我的导航栏(这是一个浮点:右)从网页的最右侧开始。HTML和CSS遵循。我知道这可能很明显,但我很茫然。
html,
body {
padding: 0;
margin: 0;
}
html {
background-color: #FFF;
max-width: 100%;
}
body {
margin-left: auto;
margin-right: auto;
width: 1024px;
background-color: #FFF;
font-family: 'Merriweather', serif;
font-family: 'Playfair Display', serif;
}
header {
height: 6em;
border-bottom: 1px solid #00529C;
position: fixed;
display: block;
overflow: hidden;
width: 100% !important;
z-index: 1;
}
nav {
max-width: 50%;
}
.hdrmenu ul {
margin-right: 1em;
padding-top: 1.5em;
}
.hdrmenu li {
float: left;
list-style: none;
/*margin: auto;*/
}
.hdrmenu li a {
text-align: center;
text-decoration: none;
padding: 0em 2em;
/*list-style: none;*/
overflow: hidden;
color: #00529C;
}
<header class="bg transition">
<nav class="hdrmenu">
<a href="index.html"><img src="_images/1280_AcYxdW7KNtA0.png" class="logo"></a>
<ul style="float: right;">
<li><a href="ardvark.html" class="slide-left-right">Ardvark</a></li>
<li><a href="beaver.html" class="slide-left-right">Beaver</a></li>
<li><a href="cougar.html" class="slide-left-right">Cougar</a></li>
<li><a href="dinosaur.html" class="slide-left-right">Dinosaur</a></li>
<li><a href="elephant.html" class="slide-left-right">Elephant</a></li>
</ul>
</nav>
</header>
<section class="mainContent">
<h1>Animals</h1>
<p>Blah, Blah</p>
</section>
在这里您有:
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: 'Merriweather', serif;
font-family: 'Playfair Display', serif;
}
header,
.mainContent {
width: 1024px;
}
.mainContent {
margin: 120px auto 0;
}
header {
height: 6em;
border-bottom: 1px solid #00529C;
position: fixed;
z-index: 1;
background-color: #FFFFFF;
margin: 0 50%;
transform: translateX(-50%);
top: 0;
left: 0;
}
.hdrmenu ul {
margin-right: 1em;
padding-top: 1.5em;
}
.hdrmenu li {
float: left;
list-style: none;
}
.hdrmenu li a {
text-align: center;
text-decoration: none;
padding: 0em 2em;
overflow: hidden;
color: #00529C;
}
要修复边框,您需要确保您的<header>
元素不会占用太多空间。问题在于它具有position: fixed
,因此width
将适用于其当前position
。我认为您希望它是该页面的三分之二,集中式。这可以通过简单地从元素(使用width: calc(100% / 3 * 2)
)中减去右侧空间来实现。并且不要像示例中那样为此设置!important
规则;!important
通常被认为是不良习惯。您应该对特异性进行阅读。
您还需要删除在<html>
和<body>
上设置的规则,并使用称为.container
的类或类似的类别。这些是文档标签,不应该真正适用定位规则。一旦规则转移到 .container
,而不是使用硬编码的width: 1024px
,而是使用 max-width
允许元素在必要时收缩。
那么,如果您希望Navbar的链接到float
到right
,则需要从nav
删除max-width: 50%
。
这可以在以下内容中看到:
html,
body {
padding: 0;
margin: 0;
}
.container {
margin-left: auto;
margin-right: auto;
max-width: calc(100% / 3 * 2);
background-color: #FFF;
font-family: 'Merriweather', serif;
font-family: 'Playfair Display', serif;
}
header {
height: 6em;
border-bottom: 1px solid #00529C;
position: fixed;
display: block;
overflow: hidden;
width: calc(100% / 3 * 2);
z-index: 1;
}
.hdrmenu ul {
margin-right: 1em;
padding-top: 1.5em;
}
.hdrmenu li {
float: left;
list-style: none;
/*margin: auto;*/
}
.hdrmenu li a {
text-align: center;
text-decoration: none;
padding: 0em 2em;
/*list-style: none;*/
overflow: hidden;
color: #00529C;
}
<div class="container">
<header class="bg transition">
<nav class="hdrmenu">
<a href="index.html"><img src="_images/1280_AcYxdW7KNtA0.png" class="logo"></a>
<ul style="float: right;">
<li><a href="ardvark.html" class="slide-left-right">Ardvark</a></li>
<li><a href="beaver.html" class="slide-left-right">Beaver</a></li>
<li><a href="cougar.html" class="slide-left-right">Cougar</a></li>
<li><a href="dinosaur.html" class="slide-left-right">Dinosaur</a></li>
<li><a href="elephant.html" class="slide-left-right">Elephant</a></li>
</ul>
</nav>
</header>
<section class="mainContent">
<h1>Animals</h1>
<p>Blah, Blah</p>
</section>
</div>
请注意,您可能还希望媒体查询与移动设备上的"更宽"视图交换。
您可以在这里检查摘要,如果您想要的
https://jsfiddle.net/qu9hg84o/7/
正如 @obsidian-age所说,问题是position: fixed
。position:fixed
将从正常流中取出内容,因此身体不能包含标头,因此边框流到结束。因为,对于position: fixed
,容器将为viewport
。检查位置并包含有关位置和包含块的_Block。
另外,您可能需要在NAV上删除width: 50%
,它将NAV项目尴尬地放置在页面中间的某个地方。
,并且,在列表项目上删除float: left
li
将在您的右边堆放列表项目。