网页上的标题问题

Question

I am creating a website and am having some header/navigation problems. 我正在创建一个网站，并且遇到一些标题/导航问题。 I have centered the website (works fine) and my header begins where it should on the page but when I add a border-bottom to the header it starts where it should but continues to right side of the page. 我已将网站居中（工作正常），并且标题从页面应在页面的起始位置开始，但是当我在标题中添加边框底部时，标题应从页面的起始位置开始，但继续到页面右侧。 Also my nav bar (which is a float: right) begins on the right-most side of the webpage. 我的导航栏（它是一个浮点数：右）也从网页的最右侧开始。 HTML and CSS to follow. HTML和CSS。 I know it is probably obvious but I am at a loss. 我知道这可能很明显，但我很茫然。

 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>

Answer 1

Here you have: 这里您有：

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;
}

Answer 2

To fix your border, you'll want to ensure that your <header> element doesn't take up too much space. 要修复边界，您需要确保<header>元素不会占用太多空间。 The problem is that it has position: fixed , so width will apply relative to its current position . 问题在于它具有position: fixed ，因此width将相对于其当前position 。 I assume you'll want it to be two-thirds of the page, centralised. 我假设您希望它集中在页面的三分之二处。 This can be achieved by simply subtracting the right-hand space from the element (with width: calc(100% / 3 * 2) ). 这可以通过简单地从元素中减去右侧空间（ width: calc(100% / 3 * 2) ）来实现。 And don't set an !important rule for this like you had in your example; 而且不要像您在示例中那样设置!important规则； !important is generally considered bad practice. !important通常被认为是不良做法。 You should read up on specificity instead. 您应该改读特异性。

You'll also want to remove your rules set on <html> and <body> and make use of a class called .container or something similar. 您还需要删除在<html>和<body>上设置的规则，并使用一个名为.container的类或类似的类。 These are document tags, and shouldn't really have positioning rules applied. 这些是文档标签，实际上不应应用定位规则。 Once the rules have been shifted to .container , instead of using a hard-coded width: 1024px , use max-width to allow the element to shrink when necessary. 将规则转移到.container ，不要使用硬编码的width: 1024px ，而应使用max-width允许元素在必要时缩小。

Then, if you want your navbar's links to float to the right , you'll want to remove max-width: 50% from nav . 然后，如果您希望导航栏的链接float到right ，则需要从nav删除max-width: 50% 。

This can be seen in the following: 可以在以下内容中看到：

 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>

Note that you may also want a media query to swap to a 'wider' view on mobile. 请注意，您可能还希望媒体查询交换到移动设备上的“更广泛”视图。

Answer 3

Can you check the snippet here if that's what you want 您是否可以在这里查看代码段

https://jsfiddle.net/qu9hg84o/7/ https://jsfiddle.net/qu9hg84o/7/

As @obsidian-age says, the problem is position: fixed . 正如@ obsidian-age所说，问题在于position: fixed 。 position:fixed will take the content out of normal flow, so body can't contain header and hence the border flows till end. position:fixed将使内容脱离正常流动，因此主体不能包含标题，因此边界流动到终点。 Because, for position: fixed , container will be viewport . 因为，对于position: fixed ，容器将是viewport 。 Check position and containing_block about position and containing blocks. 检查position和contains_block的位置和包含块。

Also, you might want to remove width: 50% on nav, it positions nav items awkwardly somewhere in middle on the page. 另外，您可能要删除width: 50%导航上的width: 50% ，它将导航项笨拙地放置在页面中间的某个位置。

And, removing float: left on list items li will stack up the list items on your right if that's also what you are expecting. 而且，如果这也是您所期望的，那么删除float: left在列表项li上将堆积在您右边的列表项。

网页上的标题问题

问题描述

3 个解决方案

解决方案1
0 2019-02-24 23:54:56

解决方案2
0 2019-02-24 23:55:53

解决方案3
0 2019-02-25 00:07:31

网页上的标题问题

问题描述

3 个解决方案

解决方案1 0 2019-02-24 23:54:56

解决方案2 0 2019-02-24 23:55:53

解决方案3 0 2019-02-25 00:07:31

解决方案1
0 2019-02-24 23:54:56

解决方案2
0 2019-02-24 23:55:53

解决方案3
0 2019-02-25 00:07:31