html - 网页上的标题问题
问题描述
我正在创建一个网站,但遇到了一些标题/导航问题。我已经使网站居中(工作正常),并且我的页眉从页面上应有的位置开始,但是当我向页眉添加边框底部时,它从应有的位置开始但继续到页面的右侧。我的导航栏(它是一个浮动:右)也从网页的最右侧开始。要遵循的 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>
解决方案
如果这是你想要的,你能在这里检查一下片段吗
https://jsfiddle.net/qu9hg84o/7/
正如@obsidian-age 所说,问题是position: fixed
. position:fixed
将使内容脱离正常流程,因此正文不能包含标题,因此边界会一直流动到结束。因为,对于position: fixed
,容器将是viewport
。检查位置和包含块关于位置和包含块。
此外,您可能想width: 50%
在导航上删除,它会将导航项目笨拙地定位在页面中间的某个位置。
而且,如果这也是您所期望的,那么删除float: left
列表项li
将在您的右侧堆积列表项。
推荐阅读
- python - 仅将新值从 Python 中的 DataFrame 附加到 CSV
- apache-spark - 更方便的方式来重现 pyspark 样本
- java - 如何从托管在 Pivotal Cloud Foundry 中的 Java 应用程序访问 Windows NAS 文件共享
- android - 在 Android 上离线安装 GoogleTTS 语音
- javascript - Cordova Ajax 调用抛出 net::ERR_SPDY_PROTOCOL_ERROR
- javascript - 实现可设置模块范围变量的最常见模式
- azure-data-explorer - 无法在 Kusto 的用户定义函数中使用命令
- c - 为什么当我在 for 循环之外声明一个变量时我的代码不起作用?
- ruby-on-rails - 如何为此通知创建部分视图
- python - 如何根据列的排序值中的特定值从numpy数组中的一列中提取数据