我应该如何构建导航栏？

Question

我想创建一个这样的导航栏：

我如何构建这样的东西？显然应该有一个蓝色背景的外部div。但是孩子的元素呢？它们应该如何构建？感谢。

Answer 1

没有关于如何正确构建页面的一般答案。有一些使用技术的通用标准，但总的来说，让你的页面正确呈现比使用多少或哪种类型的元素更重要。

例如，如果您希望页面自动重新调整大小，那么您可能希望使用Div或表格。如果您希望文本在不跨越整个页面的情况下进行换行，则可能需要使用表格或跨越...

我可以向你展示一些浮动CSS的引用......但即使在这种类型的例子中，你也可以在div中创建div，这些风格适合“品味”;或者你可以在跨度内使用跨度。

http://www.w3schools.com/css/css_float.asp

这一探索的主要警告是，企业环境通常会有广告或营销产生的风格指南，这将指示eccomerse或客户如何呈现网站，以及数据的表示。这通常会强迫你使用ex：Divs vs Spans。

Answer 2

要创建导航栏，您需要这样的东西

* {
  margin: 0;
  padding: 0;
}

nav {
  background-color: blue;
  color: white;
  font-family: Arial;
  padding: 30px 40px;
}

ul {
  list-style-type: none;
}

li {
  display: inline-block;
  width: 49%;
  text-align: right;
}

li.title {
  text-align: left;
}

<nav>
  <ul>
    <li class="title">Welcome to Our World</li>
    <li>We Work Best</li>
  </ul>
</nav>

这通常被认为是构建导航栏的最常用方法。

Answer 3

每个元素都有不同的默认显示属性，所以我认为在这种情况下它取决于元素。 范围的显示属性是内联

- 内联元素水平排列，如

内联内联内联

div的显示属性是块

https://iamarunkumar.wordpress.com/2010/02/10/what-is-the-default-display-property-for-span-and-div/