导航不住在div里面

时间：2016-10-12 14:13:52

标签： html css html5 css3

我的HTML文档中的导航不会停留在指定的div中。我把我的导航放在了一个div中，而不是留在它里面。我也想知道为什么我的标题到目前为止是正确的。导航应与不在其下方的标题位于同一行。他们都属于同一个div！那他们为什么不表现呢？ Plz的帮助。 谢谢！

.navigation-bar {
  bottom: 0px;
  display: block;
  padding-top: 70px;
  padding-bottom: 70px;
  background-color: #fff;
  color: rgba(0, 0, 0, .74);
  text-transform: uppercase;
  border: 2px solid red;
  position: relative;
}
.brand-text {
  display: block;
  overflow: visible;
  position: relative;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  float: none;
  clear: none;
  -webkit-transition: color 700ms ease;
  transition: color 700ms ease;
  font-family: Georgia, Times, 'Times New Roman', serif;
  color: #000;
  font-size: 40px;
  line-height: 36px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid blue;
}
.brand-text:hover {
  color: #858585;
}
a {
  text-decoration: none;
}
.nav-menu {
  position: relative;
  float: right;
  border: 1px solid green;
}
.nav-link {
  padding-top: 7px;
  padding-bottom: 7px;
  padding-right: 20px;
  padding-left: 20px;
  border: 1px none #858585;
  -webkit-transition: color 700ms ease, border 700ms ease;
  transition: color 700ms ease, border 700ms ease;
  font-family: Georgia, Times, 'Times New Roman', serif;
  color: #000;
  line-height: 18px;
  font-weight: 400;
  position: relative;
}
.nav-link:hover {
  border-style: none;
  border-bottom-width: 1px;
  border-bottom-color: #858585;
  color: #858585;
}
.nav-link.w--current {
  border-style: none none solid;
  border-bottom-width: 1px;
  border-bottom-color: #000;
  -webkit-transition: color 700ms ease;
  transition: color 700ms ease;
  font-family: Georgia, Times, 'Times New Roman', serif;
  color: #000;
  line-height: 18px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-link.w--current:hover {
  color: #858585;
}
.w-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
  display: block;
  position: relative;
}
<!DOCTYPE html>
<html lang="en-US">

<head>
  <title>Website</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Stylesheet.css">
</head>

<body>
  <section class="navigation-bar" data-animation="over-right" data-collapse="medium" data-contain="1" data-doc-height="1" data-duration="600" data-easing="ease-in-out-circ" data-easing2="ease-in-out-circ">
    <div class="w-container">
      <a class="w-nav-brand" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Home.html">
        <h1 class="brand-text">Website</h1>
      </a>
      <nav class="nav-menu w-nav-menu" role="navigation">
        <a class="nav-link w-nav-link" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Home.html">Gallery</a>
        <a class="nav-link w-nav-link" href="About">About</a>
        <a class="nav-link w-nav-link" href="Contact">Contact</a>
        <a class="nav-link w-nav-link" href="Blog">Blog</a>
      </nav>
    </div>

  </section>
</body>

2 个答案:

答案 0 :(得分：0)

<h1>是块级元素，因此占用整个父级宽度，将导航向下推。

将H1向左浮动，它将按您的意愿工作 - 但仅限于全屏幕片段！

.navigation-bar {
  bottom: 0px;
  display: block;
  padding-top: 70px;
  padding-bottom: 70px;
  background-color: #fff;
  color: rgba(0, 0, 0, .74);
  text-transform: uppercase;
  border: 2px solid red;
  position: relative;
}
.brand-text {
  display: block;
  overflow: visible;
  position: relative;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  float: left;
  clear: none;
  -webkit-transition: color 700ms ease;
  transition: color 700ms ease;
  font-family: Georgia, Times, 'Times New Roman', serif;
  color: #000;
  font-size: 40px;
  line-height: 36px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid blue;
}
.brand-text:hover {
  color: #858585;
}
a {
  text-decoration: none;
}
.nav-menu {
  position: relative;
  float: right;
  border: 1px solid green;
}
.nav-link {
  padding-top: 7px;
  padding-bottom: 7px;
  padding-right: 20px;
  padding-left: 20px;
  border: 1px none #858585;
  -webkit-transition: color 700ms ease, border 700ms ease;
  transition: color 700ms ease, border 700ms ease;
  font-family: Georgia, Times, 'Times New Roman', serif;
  color: #000;
  line-height: 18px;
  font-weight: 400;
  position: relative;
}
.nav-link:hover {
  border-style: none;
  border-bottom-width: 1px;
  border-bottom-color: #858585;
  color: #858585;
}
.nav-link.w--current {
  border-style: none none solid;
  border-bottom-width: 1px;
  border-bottom-color: #000;
  -webkit-transition: color 700ms ease;
  transition: color 700ms ease;
  font-family: Georgia, Times, 'Times New Roman', serif;
  color: #000;
  line-height: 18px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-link.w--current:hover {
  color: #858585;
}
.w-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
  display: block;
  position: relative;
}
<!DOCTYPE html>
<html lang="en-US">

<head>
  <title>Website</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Stylesheet.css">
</head>

<body>
  <section class="navigation-bar" data-animation="over-right" data-collapse="medium" data-contain="1" data-doc-height="1" data-duration="600" data-easing="ease-in-out-circ" data-easing2="ease-in-out-circ">
    <div class="w-container">
      <a class="w-nav-brand" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Home.html">
        <h1 class="brand-text">Website</h1>
      </a>
      <nav class="nav-menu w-nav-menu" role="navigation">
        <a class="nav-link w-nav-link" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Home.html">Gallery</a>
        <a class="nav-link w-nav-link" href="About">About</a>
        <a class="nav-link w-nav-link" href="Contact">Contact</a>
        <a class="nav-link w-nav-link" href="Blog">Blog</a>
      </nav>
    </div>

  </section>
</body>

答案 1 :(得分：0)

这是因为您将float:right设置为nav-menu，但您w-nav-brand的文字为.brand-text，您设置为display:block，因此请添加float:left w-nav-brand

.navigation-bar { bottom: 0px; display: block; padding-top: 70px; padding-bottom: 70px; background-color: #fff; color: rgba(0, 0, 0, .74); text-transform: uppercase; border: 2px solid red; position: relative; } .brand-text { display: block; overflow: visible; position: relative; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; float: none; clear: none; -webkit-transition: color 700ms ease; transition: color 700ms ease; font-family: Georgia, Times, 'Times New Roman', serif; color: #000; font-size: 40px; line-height: 36px; font-weight: 700; text-decoration: none; border: 1px solid blue; } .brand-text:hover { color: #858585; } a { text-decoration: none; } .nav-menu { position: relative; float: right; border: 1px solid green; } .nav-link { padding-top: 7px; padding-bottom: 7px; padding-right: 20px; padding-left: 20px; border: 1px none #858585; -webkit-transition: color 700ms ease, border 700ms ease; transition: color 700ms ease, border 700ms ease; font-family: Georgia, Times, 'Times New Roman', serif; color: #000; line-height: 18px; font-weight: 400; position: relative; } .nav-link:hover { border-style: none; border-bottom-width: 1px; border-bottom-color: #858585; color: #858585; } .nav-link.w--current { border-style: none none solid; border-bottom-width: 1px; border-bottom-color: #000; -webkit-transition: color 700ms ease; transition: color 700ms ease; font-family: Georgia, Times, 'Times New Roman', serif; color: #000; line-height: 18px; font-weight: 400; text-align: left; text-decoration: none; text-transform: uppercase; } .nav-link.w--current:hover { color: #858585; } .w-container { margin-left: auto; margin-right: auto; max-width: 940px; display: block; position: relative; float:left; width:100%; } .w-nav-brand { float:left; }

请参阅下面的代码段（全屏检查，因为img和nav不适合作为默认代码段区域这么小的区域。如果要减少img宽度或菜单宽度，则需要使用媒体查询低于某个视口宽度）

或参见jsfiddle＆gt; jsfiddle

让我知道是否有帮助

＆＃13;
＆＃13; 
 <section class="navigation-bar" data-animation="over-right" data-collapse="medium" data-contain="1" data-doc-height="1" data-duration="600" data-easing="ease-in-out-circ" data-easing2="ease-in-out-circ">
    <div class="w-container">
      <a class="w-nav-brand" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Home.html">
        <h1 class="brand-text">Website</h1>
      </a>
      <nav class="nav-menu w-nav-menu" role="navigation">
        <a class="nav-link w-nav-link" href="file:///home/chronos/u-381d76fe33193f98b522c78a8da993e0f6ff790d/Downloads/New%20Folder/Home.html">Gallery</a>
        <a class="nav-link w-nav-link" href="About">About</a>
        <a class="nav-link w-nav-link" href="Contact">Contact</a>
        <a class="nav-link w-nav-link" href="Blog">Blog</a>
      </nav>
    </div>

  </section>
＆＃13; 
mysql> describe as_dcm_testing;
+--------------+-------------+------+-----+---------+-------+
| Field        | Type        | Null | Key | Default | Extra |
+--------------+-------------+------+-----+---------+-------+
| LCID         | varchar(32) | NO   | PRI | NULL    |       |
| LASTACTIVITY | varchar(32) | YES  |     | NULL    |       |
| USAGE        | bigint(20)  | YES  |     | NULL    |       |
| SERVICELEVEL | varchar(16) | YES  |     | NULL    |       |
+--------------+-------------+------+-----+---------+-------+
4 rows in set (0.01 sec)
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题