如何并排对齐标签？

Question

我试过了

<div>
  <tr><h1><ins><font face ="bold" color = "white">Home</h1></ins></tr>
  <tr><h1><ins><font face ="bold" color = "white">Contact</h1></ins></tr>
</div>

导致

家

接触

如何并排对齐这些标签？

Answer 1

试试这个： {display: inline-block};

Answer 2

display:inline或float:left提供更多控制（但之后需要<div style="clear:both"></div> ）

 h1 { float: left; margin-right: 10px; }

 before <nav> <h1>hello</h1> <h1>world</h1> <div style="clear:both"></div> </nav> after

Answer 3

 nav { display: flex; }

 before <nav> <h1>hello</h1> <h1>world</h1> <div style="clear:both"></div> </nav> after

Answer 4

理想情况下，您可能会从对标记的审查中受益。

当然，您不应该在单个文档中使用多个<h1>元素。

<h1>是整个文档的主要标题。 根据定义，这意味着永远只有一个。

每当您想更改元素的视觉呈现时，您将使用CSS 。

---

HTML结构

如果您正在构建navbar ，那么您可以使用：

• <ul> - 一个无序列表

并将其嵌套在一个：

• <nav> -导航元素

---

CSS 介绍

一旦你有了上面大纲的结构，就有多种方法可以并排对齐元素：

• nav ul { display: flex; }
• nav ul { display: table; }
• nav ul li { float: left; }
• nav ul li { display: inline-block; }

开始时，最简单的方法之一是使用上面的最后一个选项：

nav ul li {
  display: inline-block;
}

---

工作示例：

 nav { background-color: rgb(191, 0, 0); } nav ul { margin: 0; padding: 0; } nav ul li { display: inline-block; width: 96px; height: 48px; line-height: 48px; text-align: center; } nav ul li a { font-family: sans-serif; color: rgb(255, 255, 255); font-weight: 900; }

 <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav>