Question

我在html css等建立自己的网站（大学工作，这是一个原因）但是我已经与我的导航栏挣扎。

第一件事就是它走到了我不想要的页面的一边。我希望它在顶部，例如堆栈溢出顶部的栏。我在导航栏中使用了flexbox，我喜欢每个部分的大小。我的代码是：

＆＃13;

body {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Georgia;
}
nav {
  background-color: #000000;
  color: #888;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
nav ul {
  float: left;
  display: block;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: top;
  list-style: none;
  text-align: center;
}
nav > ul > li > a {
  color: #aaa;
  display: block;
  line-height: 56px;
  padding: 0;
  text-decoration: none;
  text-align: center;
}
nav > ul > li:hover > a {
  color: rgb(255, 255, 255);
}

＆＃13;

<nav>
  <ul>
    <li>
      <h1>Title</h1>
    </li>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="forum.html">Forum</a>
    </li>
    <li><a href="music.html">Music</a>
    </li>
    <li><a href="about.html">About</a>
    </li>
    <li><a href="shop.html">Shop</a>
    </li>
  </ul>
</nav>

＆＃13;

Answer 1

float:top

无效。

CSS float属性可以声明为left || right，或保持原样

浮动元素在最好的时候可能会很棘手。相反，您可以使用类似display:inline-block的内容。

浮动是一个在当前向左或向右移动的框线。浮动（或“浮动”或浮动）最有趣的特征 “浮动”框是指内容可以沿着它的边流动（或者是禁止“清除”财产这样做。内容流下来左侧浮动框的右侧，沿着左侧浮动框的右侧右浮箱子。以下是float的介绍定位和内容流;控制浮动行为的确切规则在'float'属性的描述中给出。〜w3.org

样本：

nav ul li {
  display:inline-block;
  vertical-align:middle;
  list-style: none;
  text-align: center;
}

body {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Georgia;
}
nav {
  background-color: #000000;
  color: #888;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
nav ul {  
  display: inline-block;
  margin: 0;
  padding: 0;
}
nav ul li {
  display:inline-block;
  vertical-align:middle;
  list-style: none;
  text-align: center;
}
nav > ul > li > a {
  color: #aaa;
  display: block;
  line-height: 56px;
  padding: 0;
  text-decoration: none;
  text-align: center;
}
nav > ul > li:hover > a {
  color: rgb(255, 255, 255);
}

<nav>
  <ul>
    <li>
      <h1>Title</h1>
    </li>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="forum.html">Forum</a>
    </li>
    <li><a href="music.html">Music</a>
    </li>
    <li><a href="about.html">About</a>
    </li>
    <li><a href="shop.html">Shop</a>
    </li>
  </ul>
</nav>

Answer 2

你做得很好。我想提出一些事情，因为我已经遇到了一些问题。使用Bootstrap。您需要做的就是包含CSS和JavaScript文件，并在class =“navbar navbar-default navbar-fixed-top”中编写导航栏，并自动将其置于顶部，具有更好的外观和响应式设计。这一点都不难。在您的网站上理解和实施它几乎不需要花费一两个小时。

如何让html5 / css3导航栏在顶部对齐？

2 个答案: