<ul> 用于导航栏而不是<table>

Question

我正在用HTML和CSS为CS类中的一个项目构建一个网站。我已经能够用<table>标签创建一个导航栏，但我听说它的糟糕做法，所以你认为我如何用<ul>转换这个布局？

布局如下：

+-------------------------------------------------------------------------------+
|             | Company                                                         |
|  SITE LOGO  |                 Page 1  |  Page 2 |  Page 3 |  Page 4 |  Login  +
|             | Name                                                            |
+-------------------------------------------------------------------------------+

这是标记：

.nav {
color:black;
text-align:center;
vertical-align:middle;
border-collapse:collapse;
width:100%;
}

<TABLE class="nav">
<TR style="position:fixed; top:0; background-color:white; width:100%">
<TD width="77">
<img src="site_logo.png"style="text-align:center; vertical-align:middle">
</TD>
<TD>
<div style="font-size:30; font-weight: bold; text-align:left;">
Company
</div>
<div style="font-size:18; text-align:left;">
Name
</div>
</TD>
<TD width="20%">Page 1</TD>
<TD width="20%">Page 2</TD>
<TD width="20%">Page 3</TD>
<TD width="20%">Page 4</TD>
<TD width="20%">Login</TD>
</TD>
</TR>
</TABLE>

我一直试图自己使用<ul>而不是<table>，但我无法在同一个<li>元素中制作公司名称的副标题并垂直对齐所有内容。

Answer 1

以下是我如何创建导航。链接得到了均匀的分布，我添加了一个最大宽度，使其具有响应性，并在可用空间变小时将徽标移动到链接上方，以在同一行中显示所有内容。如果您不想这样，请移除flex-wrap: wrap;和max-width: 600px;:

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
color: black;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
background-color: #ccc;
padding: 20px;
}
nav ul {
display: flex;
justify-content: space-around;
width: 100%;
max-width: 600px;
list-style: none;
padding: 10px;
}
nav a {
text-decoration: none;
color: inherit;
}
.brand_container {
display: flex;
align-items: center;
justify-content: center;
/* Add this if you want the name to be below the image:
flex-direction: column;
*/
width: 200px;
}
.brand_container img {
/* This is just to make sure it is visible in this example. The background-color can be deleted if an image is added */
width: 50px;
height: 50px;
background-color: #f00;
margin: 5px;
}

<nav>
<div class="brand_container">
<img src="site_logo.png" alt="logo">
<p>Company Name</p>
</div>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Login</a></li>
</ul>
</nav>