在菜单的两侧都有选项

Question

我是 HTML 的初学者，我正在尝试制作网页以获取经验。我想创建这个菜单，但我希望它的两边都有选项。就像主页、关于我等选项在右侧一样，我也想在左侧有类似的选项，但无法弄清楚。任何帮助将不胜感激。

HTML代码：


<div id="menu">
    <nav class="navl" style="justify-content: right">
        <ul>
            <li class="navulli">
                <a href="C:\Users\vivek\Desktop\html-css-course\LegendsOfTime\LOT_Home.html">
                    Home
                </a>
            </li>
        </ul>
    </nav>
</div>

CSS代码：


#menu {
    width: 100%;
    height: 30px;
    background-size: cover;
    justify-content: right;
    margin: 0px;
    padding: 0px;
}
.navl {
    width: 100%;
    height: 150%;
    line-height: 10px;
    margin-right: 60px;
    display: flex;
    background-color: black;
    opacity: 0.6;
    margin: 0px;
}
.navulli {
    display: inline-block;
    transition: 0.7s all;
    font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
    place-items: left;
    margin: 0px;
}

.navulli:hover {
    opacity: 0.4;
    height: 20px;
    border-radius: 20px;
}
nav ul li a {
    text-decoration: none;
    color: white;
    padding: 30px;
    justify-content: right;
    font-size: calc(1rem + 0.2vw);
    margin-top: 0px;
}
i {
    text-decoration: none;
    color: white;
    justify-content: right;
    padding: 15px;
    font-size: calc(1rem + 0.5vw);
    margin-top: 0px;
}

Answer 1

一个可能的解决方案是使用 flexbox 和 justify-content: space-between;

nav {
  background: silver;
  padding: 1em;
  display: flex;
  justify-content: space-between;
}
nav ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}
nav ul li {
  list-style: none;
  display: inline;
  margin: 0 1em;
}

<nav>
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
  <ul>
    <li>four</li>
    <li>five</li>
    <li>six</li>
  </ul>
 </nav>

在菜单的两侧都有选项

Having options on both side of a menu

html

css