如何在另一个 Ul 框中显示一个 UL 框以及中心的文本？

Question

我有以下设计，我正在尝试使用 HTML 和 CSS 创建。 每个盒子里面都有一个文本。我以为我可以使用 ul li 来做到这一点，但我很难创建。

我尝试了下面的代码，但我有点困惑我的代码是最好的代码还是有其他简单的方法来处理这个问题？

另外，我如何在另一个中显示我的ul 框？

.wrapper {
  width: 700px;
  margin: auto;
  padding-top: 50px;
}

ul {
  list-style: none;
  padding: 0;
  border: 1px solid #000;
  height: 300px;
  position: relative;
}

ul li {
  border: 1px solid #f00;
  display: inline-block;
  position: absolute;
}

ul li a {
  text-decoration: none;
}

ul.first {
  width: 400px;
}

ul.first li:nth-child(1) {
  top: -10px;
  left: 30px;
}

ul.first li:nth-child(2) {
  top: 30px;
  right: -30px;
}

ul.first li:nth-child(3) {
  bottom: -10px;
  right: 30px;
}

ul.first li:nth-child(4) {
  bottom: 30px;
  left: -30px;
}

ul.two {
  width: 600px;
}

ul.two li:nth-child(1) {
  top: -10px;
  left: 30px;
}

ul.two li:nth-child(2) {
  top: -10px;
  right: 30px;
}

ul.two li:nth-child(3) {
  top: 30px;
  right: -30px;
}

ul.two li:nth-child(4) {
  bottom: 30px;
  right: -30px;
}

ul.two li:nth-child(5) {
  bottom: -10px;
  right: 30px;
}

ul.two li:nth-child(6) {
  bottom: -10px;
  left: 30px;
}

ul.two li:nth-child(7) {
  bottom: 30px;
  left: -30px;
}

ul.two li:nth-child(8) {
  top: 30px;
  left: -30px;
}

<div class="wrapper">
  <div class="innerHero"><a href="">I am hero</a></div>

  <ul class="first">
    <li><a href="">Test one</a></li>
    <li><a href="">Test two</a></li>
    <li><a href="">Test three</a></li>
    <li><a href="">Test four</a></li>
  </ul>

  <ul class="two">
    <li><a href="">Example one</a></li>
    <li><a href="">Example two</a></li>
    <li><a href="">Example three</a></li>
    <li><a href="">Example four</a></li>
    <li><a href="">Example five</a></li>
    <li><a href="">Example six</a></li>
    <li><a href="">Example seven</a></li>
    <li><a href="">Example eight</a></li>
  </ul>


</div>

Answer 1

您可以随意嵌套ul 元素。只需在 li 元素内创建另一个 ul 元素即可。

        .wrapper {
            width: 700px;
            margin: auto;
            padding-top: 50px;
        }

        ul {
            list-style: none;
            padding: 0;
            border: 1px solid #000;
            height: 300px;
            position: relative;
        }

        ul li {
            border: 1px solid #f00;
            display: inline-block;
            position: absolute;
        }

        ul li a {
            text-decoration: none;
        }

        ul.first {
            width: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        ul.first li:nth-child(1) {
            top: -10px;
            left: 30px;
        }

        ul.first li:nth-child(2) {
            top: 30px;
            right: -30px;
        }

        ul.first li:nth-child(3) {
            bottom: -10px;
            right: 30px;
        }

        ul.first li:nth-child(4) {
            bottom: 30px;
            left: -30px;
        }

        ul.two {
            width: 400px;
            height: 200px;
        }

        ul.two li:nth-child(1) {
            top: -10px;
            left: 30px;
        }

        ul.two li:nth-child(2) {
            top: -10px;
            right: 30px;
        }

        ul.two li:nth-child(3) {
            top: 30px;
            right: -30px;
        }

        ul.two li:nth-child(4) {
            bottom: 30px;
            right: -30px;
        }

        ul.two li:nth-child(5) {
            bottom: -10px;
            right: 30px;
        }

        ul.two li:nth-child(6) {
            bottom: -10px;
            left: 30px;
        }

        ul.two li:nth-child(7) {
            bottom: 30px;
            left: -30px;
        }

        ul.two li:nth-child(8) {
            top: 30px;
            left: -30px;
        }

<ul class="first">
        <li><a href="">Test one</a></li>
        <li><a href="">Test two</a></li>
        <li><a href="">Test three</a></li>
        <li><a href="">Test four</a></li>
        <li>
            <ul class="two">
                <li><a href="">Example one</a></li>
                <li><a href="">Example two</a></li>
                <li><a href="">Example three</a></li>
                <li><a href="">Example four</a></li>
                <li><a href="">Example five</a></li>
                <li><a href="">Example six</a></li>
                <li><a href="">Example seven</a></li>
                <li><a href="">Example eight</a></li>
            </ul>
        </li>
</ul>

Answer 2

您可以简单地将容器的 position 设置为 relative 并将所有内部内容的 position 更改为 absolute 将使它们的所有位置都取决于其容器，而您可以根据需要调整每个通过更改其top、bottom、right 和left 元素，直到获得预期的输出

当你完成后，你可能会面临另一个问题，那就是

您不会点击您放置在另一个内容中的链接

您知道为什么会发生该问题是因为顶部元素可能与您的 divs 重叠，但不要担心我也得到了解决方案，只需应用 z-index 这将防止内部 divs 在这里重叠是东西

当一个 div 在另一个 div 中时，您可以简单地将 z-index 设置为 1，当另一个可点击元素位于具有 z-index 的 div 内时，您将增加该 @ 的 z-index 987654338@ 所以这将是z-index: 2; 这将防止它被具有z-index 的div 重叠。

示例

.wrapper {
  width: 700px;
  margin: auto;
  padding-top: 50px;
  position: relative;
}

ul {
  list-style: none;
  padding: 0;
  border: 1px solid #000;
  position: relative;
  height: 300px;
}

ul.first {
  width: 400px;
  position: absolute;
  left: 100px;
  top: 120px;
  z-index: 1;
}

ul.two {
  width: 600px;
  position: relative;
  height: 400px;
}

ul li {
  border: 1px solid #f00;
  display: inline-block;
  position: absolute;
}

ul li a {
  text-decoration: none;
}

ul.first li:nth-child(1) {
  top: -10px;
  left: 30px;
}

ul.first li:nth-child(2) {
  top: 30px;
  right: -30px;
}

ul.first li:nth-child(3) {
  bottom: -10px;
  right: 30px;
}

ul.first li:nth-child(4) {
  bottom: 30px;
  left: -30px;
}

ul.two li:nth-child(1) {
  top: -10px;
  left: 30px;
}

ul.two li:nth-child(2) {
  top: -10px;
  right: 30px;
}

ul.two li:nth-child(3) {
  top: 30px;
  right: -30px;
}

ul.two li:nth-child(4) {
  bottom: 30px;
  right: -30px;
}

ul.two li:nth-child(5) {
  bottom: -10px;
  right: 30px;
}

ul.two li:nth-child(6) {
  bottom: -10px;
  left: 30px;
}

ul.two li:nth-child(7) {
  bottom: 30px;
  left: -30px;
}

ul.two li:nth-child(8) {
  top: 30px;
  left: -30px;
}

.innerHero {
  position: absolute;
  left: 40%;
  top: 55%;
  z-index: 2;
}

<div class="wrapper">
  <div class="innerHero"><a href="">I am hero</a></div>

  <ul class="first">
    <li><a href="">Test one</a></li>
    <li><a href="">Test two</a></li>
    <li><a href="">Test three</a></li>
    <li><a href="">Test four</a></li>
  </ul>

  <ul class="two">
    <li><a href="">Example one</a></li>
    <li><a href="">Example two</a></li>
    <li><a href="">Example three</a></li>
    <li><a href="">Example four</a></li>
    <li><a href="">Example five</a></li>
    <li><a href="">Example six</a></li>
    <li><a href="">Example seven</a></li>
    <li><a href="">Example eight</a></li>
  </ul>
</div>

Answer 3

根据您的问题，在我看来，您并不是真的要将列表嵌套为 HTML 中的主列表和子列表 语义，而只是将一个“列表框”放置在另一个“列表框”中（布局） .

基于此，在我的回答中，我将position: absolute; 应用于两个“列表框”中较小的一个，以及它的位置和大小（顶部/左侧/宽度/高度）的一些参数。要使 position: absolute; 按预期工作，有必要将 position: relative 添加到两个框的父级 .wrapper div。

也可以使用position: absolute 和下面显示的设置以类似的方式放置主文本，因为它是两个“列表框”的兄弟。这样，较小的“列表框”和英雄 div 的位置都锚定到包装器的位置，但 在文档流之外（由于绝对位置），这样就不会占用任何空间它们自己的，但与较大的“列表框”重叠。

编辑：我为内框和主文本链接添加了z-index 属性，以使包含的链接可点击。

.wrapper {
  width: 700px;
  margin: auto;
  padding-top: 50px;
  position: relative;
}

ul {
  list-style: none;
  padding: 0;
  border: 1px solid #000;
  position: relative;
  height: 300px;
}

ul.first {
  width: 400px;
  position: absolute;
  left: 100px;
  top: 120px;
  z-index:1;
}

ul.two {
  width: 600px;
  position: relative;
  height: 400px;
}
.innerHero {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index:2;
}
ul li {
  border: 1px solid #f00;
  display: inline-block;
  position: absolute;
}

ul li a {
  text-decoration: none;
}

ul.first li:nth-child(1) {
  top: -10px;
  left: 30px;
}

ul.first li:nth-child(2) {
  top: 30px;
  right: -30px;
}

ul.first li:nth-child(3) {
  bottom: -10px;
  right: 30px;
}

ul.first li:nth-child(4) {
  bottom: 30px;
  left: -30px;
}

ul.two li:nth-child(1) {
  top: -10px;
  left: 30px;
}

ul.two li:nth-child(2) {
  top: -10px;
  right: 30px;
}

ul.two li:nth-child(3) {
  top: 30px;
  right: -30px;
}

ul.two li:nth-child(4) {
  bottom: 30px;
  right: -30px;
}

ul.two li:nth-child(5) {
  bottom: -10px;
  right: 30px;
}

ul.two li:nth-child(6) {
  bottom: -10px;
  left: 30px;
}

ul.two li:nth-child(7) {
  bottom: 30px;
  left: -30px;
}

ul.two li:nth-child(8) {
  top: 30px;
  left: -30px;
}

<div class="wrapper">
  <div class="innerHero"><a href="">I am hero</a></div>

  <ul class="first">
    <li><a href="">Test one</a></li>
    <li><a href="">Test two</a></li>
    <li><a href="">Test three</a></li>
    <li><a href="">Test four</a></li>
  </ul>

  <ul class="two">
    <li><a href="">Example one</a></li>
    <li><a href="">Example two</a></li>
    <li><a href="">Example three</a></li>
    <li><a href="">Example four</a></li>
    <li><a href="">Example five</a></li>
    <li><a href="">Example six</a></li>
    <li><a href="">Example seven</a></li>
    <li><a href="">Example eight</a></li>
  </ul>


</div>