Как отобразить одно поле UL внутри другого поля UL вместе с текстом в центре?

ProgramBox

Как отобразить одно поле UL внутри другого поля UL вместе с текстом в центре?

Post author:admin
Запись опубликована:23 марта, 2023
Post category:Вопросы по программированию

#html #css #html-lists

#HTML #css #html-списки

Вопрос:

Ниже приведен дизайн, который я пытаюсь создать с использованием 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>

1. Что касается предложений о вложенности списка ниже, ваша структура списка должна отражать характер информации для хорошей семантики документа и доступности. Списки не должны использоваться для произвольного размещения содержимого на странице. Если вы обнаружите, что нарушаете этот принцип, просто используйте divs или другие элементы макета.

2. @isherwood, на самом деле, я подумал, что UL LI — хороший способ сделать. Поэтому я должен использовать div, созданный из ul li. правильно?

Ответ №1:

Вы можете вложить свои ul элементы по своему усмотрению. Просто создайте еще один ul элемент внутри li элемента.

Показать фрагмент кода

         .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>

Ответ №2:

Вы можете просто установить для position контейнера значение relative и изменить все внутреннее содержимое position на absolute , чтобы все их положение зависело от контейнера, тогда как, как вы хотите, вы можете настроить каждый элемент, изменяя его top , bottom , right и left , пока не получите ожидаемый результат

Когда вы закончите, вы, возможно, столкнетесь с другой проблемой, которая заключается в том, что

вы не будете нажимать на ссылки, которые находятся внутри содержимого, которое вы разместили внутри другого

вы знаете, почему эта проблема возникнет, потому что верхние элементы, вероятно, перекрывают ваши divs но не волнуйтесь, у меня тоже есть решение, просто примените z-index это предотвратит перекрытие внутренних divs элементов вот что

когда один div находится внутри другого, вы можете просто установить z-index значение 1 , и когда есть другие интерактивные элементы, которые расположены внутри того, div который имеет z-index , вы увеличите z-index его div так, чтобы это было z-index: 2; , это предотвратит его перекрытие тем, 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;
}

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>

1. Мой ожидаемый результат отличается от вашего фрагмента.

2. @user9437856 мое решение не соответствовало ожидаемому результату, если да, где вам нужно, чтобы я улучшил, спасибо

Ответ №3:

Из вашего вопроса мне кажется, что вы на самом деле не имеете в виду вложение списков в качестве основного и подсписка семантически в HTML, а просто разместите одно «поле списка» внутри другого (layoutwise).

Исходя из этого, в своем ответе я применил position: absolute; к меньшему из двух «списков» вместе с некоторыми параметрами для его положения и размера (верхний / левый / ширина / высота). Чтобы position: absolute; работать должным образом, необходимо добавить position: relative к родительскому из двух полей, .wrapper div.

Также текст героя можно разместить аналогичным образом, используя position: absolute и настройки, показанные ниже, поскольку он является родственным братом двух «полей списка». Таким образом, как меньшее «поле списка», так и позиции главного элемента div привязаны к положению оболочки, но вне потока документов (из-за абсолютной позиции), таким образом, не занимая никакого собственного пространства, но перекрывая большее «поле списка».

Редактировать: я добавил z-index свойства для внутреннего поля и текстовой ссылки hero, чтобы сделать включенные ссылки интерактивными.

 .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>

1. Я не могу нажать на Тест один, тест два и так далее.

2. Ах, извините, забыл об этом. Я дополнительно добавил z-индексы для внутреннего поля и текстовую ссылку героя, чтобы сделать включенные ссылки интерактивными.