1

Всем привет. Нужно сделать три горизонтальних меню по центру div блока Как на рисунке.

Так же переместить знаки наверх. Вировнять по горизонтали смог, как вертикально уже пару дней не получается.

Вот мой код html и css.

body {
    font-family: Arial, sans-serif;
}

.container {
    background: #ffd1f7;
    height: 60%;
    width: 80%;
    outline: 10px double black;
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div.container div {
    display: inline-block;
}

ul {
    list-style-type: none;
}

li {
    font-size: 20px;
    float: left;
    text-transform: uppercase;
    margin-right: 50px;
    text-align: center;
}

ul.menuFirst li {
    background: url("../images/checked.png") no-repeat;
    padding-left: 30px;
}

ul.menuFirst li:hover {
    background: url("../images/checked-hover.png") no-repeat;
}

ul.menuThird{
    list-style-image: url("../images/smile.png");
}

ul.menuThird li:hover {
    list-style-image: url("../images/smile-hover.png");
}
<div class="container">
    <div>
        <ul class="menuFirst">
            <li>About</li>
            <li>News</li>
            <li>Teachers</li>
            <li>Programs</li>
            <li>Cost</li>
        </ul>
    </div>
    <div>
        <ul class="menuThird">
            <li>About</li>
            <li>News</li>
            <li>Teachers</li>
            <li>Programs</li>
            <li>Cost</li>
        </ul>
    </div>
</div>

в div контейнере должно быть 3 листа

<div>
    <ul class="menuSecond">
        <li>About</li>
        <li>News</li>
        <li>Teachers</li>
        <li>Programs</li>
        <li>Cost</li>
    </ul>                                                               
</div>

1 ответ 1

1

Вот этот блок, свёрстанный на флексах:

body {
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
    justify-content: center;
    background: #ffd1f7;
    outline: 10px double black;
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

ul {
    list-style-type: none;
}

li {
    font-size: 20px;
    float: left;
    text-transform: uppercase;
    margin-right: 50px;
    text-align: center;
}

section {
    height: 100%;
}

section:first-child {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

section:first-child ul {
    display: flex;
    justify-content: space-around;
}

section:last-child {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

section:last-child ul {
    display: flex;
    justify-content: space-around;
}
<div class="container">
            <section>
                <div class="first">
                    <ul>
                        <li>About</li>
                        <li>News</li>
                        <li>Teachers</li>
                    </ul>
                </div>
                <div class="second">
                    <ul>
                        <li>About</li>
                        <li>News</li>
                        <li>Teachers</li>
                    </ul>
                </div>
                <div class="third">
                    <ul>
                        <li>About</li>
                        <li>News</li>
                        <li>Teachers</li>
                    </ul>
                </div>
            </section>

            <section>
                <div class="first">
                    <ul>
                        <li>Programs</li>
                        <li>Cost</li>
                    </ul>
                </div>
                <div class="second">
                    <ul>
                        <li>Programs</li>
                        <li>Cost</li>
                    </ul>
                </div>
                <div class="third">
                    <ul>
                        <li>Programs</li>
                        <li>Cost</li>
                    </ul>
                </div>
            </section>
        </div>

Думаю, принцип понятен

2
  • да, спасибо. а как передвинуть маркера списка слева наверх? есть какие-то варианты? Commented 26 апр. 2020 в 16:11
  • никак, можно создать "псевдо" маркер с помощью псевдоэлементов.
    – kertAW
    Commented 26 апр. 2020 в 17:12

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.