Горизонтальный список съезжает на вёрстке, хотя отступов - нет

[MenCeV]

Сделал горизонтальные элементы списка 2х2 с помощью display: inline-block, но элементы почему-то съехали, хотя никаких отступов НЕТ. Прошу, пожалуйста помочь.

[maxik]

Странное использование UL LI....Прям как страшный сон))).... Спрашивается - зачем городить такое....

Ссылка для просмотра - http://pro100max.ru/test-1/

test-1.zip

Edited November 29, 2021 by maxik

[klierik]

Попробуйте родителю задать

display: flex;

 

[MenCeV]

27.11.2021 в 05:56, klierik сказал:

Попробуйте родителю задать

display: flex;

Если так сделать, то все 4 элемента встают в один ряд, а мне нужно 2 ряда

[klierik]

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

[MenCeV]

Прикрепляю изображение результата(бордеры для наглядности). Все отступы убраны, в браузере не отображаются. Так же прикрепляю класс, который присваиваю <li> и html код.

.conteiner-blocks{

    padding: 0;

    margin: 0;

    border: solid;

    border-width: 0;

    width: 572px;

    height: 505px;

    list-style-type: none;

    display: inline-block;

    position: relative;

    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px;

}

 

<li class="conteiner-blocks conteiner-blocks-line">

            <img src="img\intro.png" alt="" class="block-image">

            <div class="block-text">

              <p class="block-title">Введение</p>

              <p class="text">Как работают сайты. Верстка</p>

              <p class="text">Возможности HTML, CSS, JS</p>

              <p class="text">Редактор кода. Codepen</p>

              <p class="text">Работа с DevTools</p>            

              <p class="number">01</p>

            </div>

          </li>

           <li class="conteiner-blocks">

            <img src="img\base-html.png" alt="" class="block-image">

            <div class="block-text">

              <p class="block-title">Базовый HTML</p>

              <p class="text">Базовые теги</p>

              <p class="text">Теги картинок и ссылок</p>

              <p class="text">Теги таблиц</p>

              <p class="text">Служебные теги</p>

              <p class="text">Кодстайл HTML</p>

              <p class="number">02</p>

            </div>

          </li>

           <li class="conteiner-blocks conteiner-blocks-line">

            <img src="img\base-css.png" alt="" class="block-image">

            <div class="block-text">

              <p class="block-title">Базовый CSS</p>

              <p class="text">Подключение CSS</p>

              <p class="text">Вес селектора</p>

              <p class="text">Свойство display</p>

              <p class="text">Блочная модель и позиционирование</p>

              <p class="text">Кодстайл CSS</p>

              <p class="number">03</p>

           </li>

           <li class="conteiner-blocks">

            <img src="img\layout.png" alt="" class="block-image">

            <div class="block-text">

              <p class="block-title">Работа с макетом</p>

              <p class="text">Про форматы изображений</p>

              <p class="text">Работа с макетом в Photoshop</p>

              <p class="text">Работа с макетом в Figma</p>

              <p class="number">04</p>

           </li>

       </ul>

7 часов назад, klierik сказал:

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

Вот код.

[MenCeV]

6 часов назад, maxik сказал:

Странное использование UL LI....Прям как страшный сон))).... Спрашивается - зачем городить такое....

Ссылка для просмотра - http://pro100max.ru/test-1/

test-1.zip 637 \u041a\u0431 · 2 скачивания

Спасибо большое. А такой вопрос, можно ли это сделать с помощью display : inline-block? Просто в интернете видел, что с помощью него делают, вот интересно, почему у меня не получается.

[SelenIT]

Судя по всему, дело в дефолтном вертикальном выравнивании по базовой лини текста (vertical-align: baseline), для инлайн-блоков эта линия — низ последней строки текста. Можно исправить, изменив vertical-align на top или bottom.

Но вообще на инлайн-блоках (а до них на флоатах, а еще раньше на таблицах) такое раньше делали вынужденно, «от бедности» — из-за отсутствия нормальных кроссбраузерных инструментов именно для горизонтальной раскладки блоков. Сейчас эта задача гораздо проще и надежнее решается флексбоксами (а то и гридами), а браузерами, не понимающими флексбоксов, смело можно пренебречь.