0

我正在尝试为网站创建导航栏。我想将 div 向上移动到#header. 我想用百分比来做到这一点(e.g bottom:50%)。但它只适用于像素(e.g bottom:200px)。

html,
body {
  height: 100%;
}

#header {
  position: relative;
  height: 10%;
}

#logo {
  background: red;
}

#logo img {
  background-color: coral;
}

#logo h2 {
  font-family: 'Gloria Hallelujah', cursive;
}

#nav nav {
  position: relative;
  left: 85%;
  bottom: 50%;
  margin: 1em;
}

#nav nav a {
  font-family: 'Gloria Hallelujah', 'Rubik Mono One', sans-serif;
  margin-right: 1em;
}
<div id="header">
  <div id="logo">
    <img src="" alt="" width="42" height="42">
    <h2>title</h2>
  </div>
  <div id="nav">
    <nav>
      <a routerLink="/"> HOME </a>
      <a routerLink="/about"> ABOUT </a>
      <a routerLink="/blog"> BLOG </a>
    </nav>
  </div>

</div>

4

3 回答 3

0

div#logo阻塞页面的整个宽度。所以导航菜单出现在下一行。

您可以制作#logo并#nav 与display:inline-blockwidth: 300px; and width: calc(100vw - 300px)

或者，您可以参考现有模板，如 bootstrap。

<nav class="navbar navbar-default">
 <div class="container-fluid">
  <div class="navbar-header">
   <a class="navbar-brand" href="#">WebSiteName</a>
  </div>
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
</ul>

参考：https ://www.w3schools.com/bootstrap/bootstrap_navbar.asp

于 2019-07-03T08:15:19.623 回答
0

position: relative;属性不适用于 %；如果您尝试使用，position: absolute;那么它将起作用。我不知道您实际上要做什么，但是根据您的问题，我们可以解决此问题。

html,
body {
  height: 100%;
}

#header {
  position: relative;
  height: 10%;
}

#logo {
  background: red;
}

#logo img {
  background-color: coral;
}

#logo h2 {
  font-family: 'Gloria Hallelujah', cursive;
}

#nav nav {
  position: relative;
  width:100%;
  background-color:#000;
  left: 0%;
  bottom: 50%;
  color:#fff;
}

#nav nav a {
  font-family: 'Gloria Hallelujah', 'Rubik Mono One', sans-serif;
  margin-right: 1em;
}
<div id="header">
  <div id="logo">
    <img src="" alt="" width="42" height="42">
    <h2>title</h2>
  </div>
  <div id="nav">
    <nav>
      <a routerLink="/"> HOME </a>
      <a routerLink="/about"> ABOUT </a>
      <a routerLink="/blog"> BLOG </a>
    </nav>
  </div>

</div>

于 2019-07-03T08:10:48.577 回答
0

试试这个代码：

html, body { 
    height: 100%;
}
#header {
    position: relative;
    height: 10%;
}
#header h2{
  margin: 0;
}
#logo {
    background:red; 
}
#logo img{
    background-color: coral;    
}
#logo h2{
    font-family: 'Gloria Hallelujah', cursive; 
}

#nav nav {
    position: absolute;
    left: 85%;
    bottom: 50%;
    width: 100%;
    height: 0;
}
#nav nav a {
    font-family: 'Gloria Hallelujah','Rubik Mono One', sans-serif;
    margin-right: 1em; 
}
<body>
<div id = "header">
  <div id = "logo">
    <img src="" alt="" width="42" height="42">
    <h2>title</h2>
  </div>
  <div id = "nav">
      <nav> 
          <a routerLink="/"> HOME </a>
          <a routerLink="/about"> ABOUT </a>
          <a routerLink="/blog"> BLOG </a>
      </nav>
  </div>

</div>

</body>

于 2019-07-03T08:20:32.320 回答