怎么用div横排做导航栏

要用div横排做导航栏，可以按照以下步骤进行：

1. 定义一个父容器，用于包含所有的导航元素。可以给这个父容器添加一个类名，比如nav。

2. 在父容器中添加多个div，每个div代表一个导航元素。可以给每个div添加一个类名，比如nav-item。

3. 为nav和nav-item添加样式，使它们能够在同一行显示。可以使用display: inline-block;或float: left;来实现。

4. 为nav-item添加间距和样式，使其看起来像一个完整的导航元素。可以使用padding和border等属性来实现。

5. 如果需要在当前选中的导航元素上添加样式，可以使用class来标记当前选中元素，并添加相应的样式。

下面是一个示例代码：

HTML代码：

<div class="nav">
  <div class="nav-item active">首页</div>
  <div class="nav-item">新闻</div>
  <div class="nav-item">产品</div>
  <div class="nav-item">关于我们</div>
</div>

CSS代码：

.nav {
  background-color: #eee;
  padding: 10px;
}

.nav-item {
  display: inline-block;
  padding: 10px;
  border: 1px solid #ccc;
}

.nav-item.active {
  background-color: #ccc;
  color: #fff;
}

在这个示例中，导航栏的父容器是一个div，类名为nav。每个导航元素也是一个div，类名为nav-item。当前选中的导航元素使用了class="active"来标记，并添加了相应的样式。