在下拉式大型菜单中将标题居中置于两个无序列表上-解网

问：

我希望将标题居中在两个无序列表的顶部。我对 HTML、CSS 和 JS 相当陌生，所以我的首选通常是聊天 gpt 或只是谷歌，但我似乎找不到任何如何最好地做到这一点的例子，而且聊天 gpt 似乎不知道我想要什么，所以我认为这里是最好的地方。

正如我之前提到的，我希望将标题集中在两个无序列表上。我已经在这张图片中大致说明了我想要的东西：悬停巨型菜单的描绘

我在这个 codepen 中拥有我当前的所有代码：Codepen Code，我希望你能帮助我。

我尝试以多种方式定位标题并更改列表的样式，但我似乎只能使标题出现在所有链接的顶部，例如：标题下的链接长列表，或者将标题显示在单个框中的侧面，如下所示：单个框中的标题（请注意框底部的下划线，因为我使用边框作为下划线）。我最好只做 css 和 html。如果您不喜欢使用 codepen，请提供以下代码：

HTML格式：

<nav>
  <div class="container">
    <ul class="menu-main">
      <li class="Tab1"><a href="">Tab 01</a>
        <div class="menu-sub">
          <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
          </ul>
        </div>
      </li>
      <li class="Tab2"><a href="">Tab 02</a>
        <div class="menu-mega">
          <ul>
            <h3>Category</h3>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
          </ul>
          <ul>
            <h3>Category</h3>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
          </ul>
          <ul>
            <h3>Category</h3>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
          </ul>
          
        </div>
      </li>
      <li class="Tab2"><a href="">Tab 03</a>
        
        <div class="menu-mega">
          
          <ul>
            <h3>Category</h3>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
          </ul>
          <ul>
            <h3>Category</h3>
            <ul>
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
              <li><a href="">Link 4</a></li>
              <li><a href="">Link 5</a></li>
            </ul>
            <ul>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 5</a></li>
              </ul>
          </ul>
          
        </div>
       
      </li>
      <li><a href="">Tab 04</a></li>
    </ul>
  </div>
</nav>

CSS：

* {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
}
a {
  text-decoration: none;
  color: white;
}
body {
  background: #333333;
}
.container {
  width: 100%;
  height: 40px;
  background: #666666;
}
.menu-main {
  display: flex;
  justify-content: start;
}
.menu-main li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 10px;
  height: 40px;
  width: 100px;
  position: relative;
  transition: all 0.5s;
}
h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: 0 10px 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  
}
.menu-main li:hover {
  background: gray;
}
.menu-sub {
  display: flex;
  justify-content: center;
  pointer-events:none;
  opacity: 0;
  position: absolute;
  top: 40px;
  left: 0px;
  background: #555555;
  width: 100%;
  transition: all 0.2s ease-in-out;
}
.Tab1:hover .menu-sub,
.Tab2:hover .menu-mega
{
  opacity: 1;
  pointer-events:auto;
}
.menu-sub ul li {
  transition: all 0.2s ease-in-out;
}
.menu-mega {
  display: flex;
  pointer-events:none;
  opacity: 0;
  justify-content: space-evenly;
  position: absolute;
  top: 40px;
  left: 0px;
  background: #555555;
  width: auto;
  padding: 10px;
  transition: all 0.2s ease-in-out;
}

此外，我可以对我的代码进行的任何改进将不胜感激，因为我的 Web 开发之旅仍然只有 2 周，我一直在寻找如何改进！谢谢！

CSS 、HTML-LISTS 居中

1赞 Alohci 11/15/2023

首先花一些时间使你的 HTML 有效。这将为你应用样式提供更好的基础。

0赞 DustyKrumples 11/15/2023

你能给我一个更具体的回答吗，是什么让HTML代码有效？如前所述，我仍然是 HTML 和 CSS 的新手，所以如果你能澄清一下，那就太好了！

0赞 Alohci 11/15/2023

学会定期使用 validator.w3.org/nu 来检查你的 HTML。

答：

0赞 Brett Donald 11/15/2023 #1

如果您希望并排显示两个单独的列表，则需要在它们周围添加一个 flex 包装器。

* {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
}
a {
  text-decoration: none;
  color: white;
}
body {
  background: #333333;
}
.container {
  width: 100%;
  height: 40px;
  background: #666666;
}
.menu-main {
  display: flex;
  justify-content: start;
}
.menu-main li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 10px;
  height: 40px;
  width: 100px;
  position: relative;
  transition: all 0.5s;
}
h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: 0 10px 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  
}
.menu-main li:hover {
  background: gray;
}
.menu-sub {
  display: flex;
  justify-content: center;
  pointer-events:none;
  opacity: 0;
  position: absolute;
  top: 40px;
  left: 0px;
  background: #555555;
  width: 100%;
  transition: all 0.2s ease-in-out;
}
.Tab1:hover .menu-sub,
.Tab2:hover .menu-mega
{
  opacity: 1;
  pointer-events:auto;
}
.menu-sub ul li {
  transition: all 0.2s ease-in-out;
}
.menu-mega {
  display: flex;
  pointer-events:none;
  opacity: 0;
  justify-content: space-evenly;
  position: absolute;
  top: 40px;
  left: 0px;
  background: #555555;
  width: auto;
  padding: 10px;
  transition: all 0.2s ease-in-out;
}
.multi {
  display: flex;
}

<nav>
  <div class="container">
    <ul class="menu-main">
      <li class="Tab1"><a href="">Tab 01</a>
        <div class="menu-sub">
          <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
          </ul>
        </div>
      </li>
      <li class="Tab2"><a href="">Tab 02</a>
        <div class="menu-mega">
          <div>
            <h3>Category</h3>
            <ul>
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
              <li><a href="">Link 4</a></li>
              <li><a href="">Link 5</a></li>
            </ul>
          </div>
          <div>
            <h3>Category</h3>
            <ul>
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
              <li><a href="">Link 4</a></li>
              <li><a href="">Link 5</a></li>
            </ul>
          </div>
          <div>
            <h3>Category</h3>
            <ul>
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
              <li><a href="">Link 4</a></li>
              <li><a href="">Link 5</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li class="Tab2"><a href="">Tab 03</a>
        <div class="menu-mega">
          <div>
            <h3>Category</h3>
            <ul>
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
              <li><a href="">Link 4</a></li>
              <li><a href="">Link 5</a></li>
            </ul>
          </div>
          <div>
            <h3>Category</h3>
            <div class="multi">
              <ul>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 5</a></li>
              </ul>
              <ul>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 5</a></li>
              </ul>
            </div>
          </div>
        </div>
      </li>
      <li><a href="">Tab 04</a></li>
    </ul>
  </div>
</nav>

但是，如果您想要一个自动换行的列表，则可以使用规则设置列表样式。columns

* {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
}
a {
  text-decoration: none;
  color: white;
}
body {
  background: #333333;
}
.container {
  width: 100%;
  height: 40px;
  background: #666666;
}
.menu-main {
  display: flex;
  justify-content: start;
}
.menu-main li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 10px;
  height: 40px;
  width: 100px;
  position: relative;
  transition: all 0.5s;
}
h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: 0 10px 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  
}
.menu-main li:hover {
  background: gray;
}
.menu-sub {
  display: flex;
  justify-content: center;
  pointer-events:none;
  opacity: 0;
  position: absolute;
  top: 40px;
  left: 0px;
  background: #555555;
  width: 100%;
  transition: all 0.2s ease-in-out;
}
.Tab1:hover .menu-sub,
.Tab2:hover .menu-mega
{
  opacity: 1;
  pointer-events:auto;
}
.menu-sub ul li {
  transition: all 0.2s ease-in-out;
}
.menu-mega {
  display: flex;
  pointer-events:none;
  opacity: 0;
  justify-content: space-evenly;
  position: absolute;
  top: 40px;
  left: 0px;
  background: #555555;
  width: auto;
  padding: 10px;
  transition: all 0.2s ease-in-out;
}
.multi {
  columns: 2;
}

<nav>
  <div class="container">
    <ul class="menu-main">
      <li class="Tab1"><a href="">Tab 01</a>
        <div class="menu-sub">
          <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
          </ul>
        </div>
      </li>
      <li class="Tab2"><a href="">Tab 02</a>
        <div class="menu-mega">
          <div>
            <h3>Category</h3>
            <ul>
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
              <li><a href="">Link 4</a></li>
              <li><a href="">Link 5</a></li>
            </ul>
          </div>
          <div>
            <h3>Category</h3>
            <ul>
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
              <li><a href="">Link 4</a></li>
              <li><a href="">Link 5</a></li>
            </ul>
          </div>
          <div>
            <h3>Category</h3>
            <ul>
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
              <li><a href="">Link 4</a></li>
              <li><a href="">Link 5</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li class="Tab2"><a href="">Tab 03</a>
        <div class="menu-mega">
          <div>
            <h3>Category</h3>
            <ul>
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
              <li><a href="">Link 4</a></li>
              <li><a href="">Link 5</a></li>
            </ul>
          </div>
          <div>
            <h3>Category</h3>
            <ul class="multi">
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
              <li><a href="">Link 4</a></li>
              <li><a href="">Link 5</a></li>
              <li><a href="">Link 6</a></li>
              <li><a href="">Link 7</a></li>
              <li><a href="">Link 8</a></li>
              <li><a href="">Link 9</a></li>
              <li><a href="">Link 10</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li><a href="">Tab 04</a></li>
    </ul>
  </div>
</nav>

0赞 DustyKrumples 11/15/2023

两种方式都完美无缺。非常感谢您简洁明了的回答！

上一个：在CSS中定位具有绝对和相对位置的困难元素

下一个：使用 Jest 测试 Angular 应用程序时，从 ol-contextmenu 中意外的令牌“导出”

在下拉式大型菜单中将标题居中置于两个无序列表上

Centering a title over two unordered lists in a dropdown mega menu

评论

评论