时间戳

首页 > 解决方案 > CSS 底部属性不适用于百分比（仅像素）

html - CSS 底部属性不适用于百分比（仅像素）

问题描述

我正在尝试为网站创建导航栏。我想将 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>

标签： htmlcss

解决方案

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

推荐阅读