0

Я сделал кнопку на контейнер li. То есть нажимаешь на текст и оно выполняет свою функцию. Проблема лишь в одном. На кнопке стоит следующее значение: style = "left: 0px;", но всё же отступ есть(скриншот ниже). Подскажите пожалуйста, где я допустил ошибку в CSS.

    <style type="text/css">
        ul {
            display: block;
            text-align: center;
            background: grey;
        } 
        a{text-decoration: none;color:white;}
        li {
          display: inline-block;
          font-size: 200%;
          background-color: grey;
          padding: 0.5rem 5rem;
          position: absolute;
          width: 160px;
          height: 50px;
        }
        li:hover{
            background-color: darkgrey;
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
        }
        body{
            background: url(bg.png) no-repeat;
            background-attachment:fixed;
            position: absolute;
        }
        <ul>
            <li style = "left: 0px;">
                <a href = "home_page.html", target="_self">Главная</a>
            </li>
            <li style = "left: 320px;">
                <a href = "about.html", target="_self">О нас</a>
            </li>
            <li style = "left: 640px;">
                <a href = "service.html", target="_self">Услуги</a>
            </li>
            <li style = "left: 960px;">
                <a href = "contakt.html", target="_self">Контакты</a>
            </li>
        </ul>

Как дополнение скажу: пока настраивал код выше, добавил не все стили, отступа не было. Стили которые добавлял в код на показ: ul, a,li. После этого добавил ВСЕ стили и появился отступ

введите сюда описание изображения

2 ответа 2

0

Всё легко и просто, измените в li position: absolute; на position: fixed;.

6
  • Я бы сказал так, "Всё легко, просто почитайте о том как верстать сайты"..
    – De.Minov
    27 дек 2021 в 2:31
  • Это неправильно, это нарушает правило сообщества т.к. со всеми нужно быть уважительным.
    – ΝNL993
    27 дек 2021 в 10:37
  • кто говорил о том, что я не уважителен? Просто человек изначально подходит к задаче не правильно.
    – De.Minov
    27 дек 2021 в 10:48
  • Просто оставлю здесь ссылку ru.stackoverflow.com/conduct#unfriendly-language
    – ΝNL993
    27 дек 2021 в 11:35
  • у меня 17к репутации, я знаю правила 😉
    – De.Minov
    27 дек 2021 в 13:27
0

Вам браузер всё ломает стилями по-умолчанию. У вас цвет фона в ul. Этот тег имеет обычное позиционирование. А body имеет padding и не позволяет прижаться серому фону ul к левому краю.

Тут несколько вариантов решений:

  1. сбрасывают все стили (reset.css), то есть все padding и margin = 0
  2. задают свой padding для body (например, 15px), а для элементов делают отрицательный margin-left и margin-right (соответственно -15px).
  3. Можно сделать нулевой отступ - body {padding: 0;}. Но тогда текст на мобильных будет прижиматься к краю экрана. А это некрасиво и неудобно читать. Поэтому нужно задавать padding для всех блоков с текстом.

Я чаще применяю вариант 3. Не люблю противоестественные отрицательные margin в варианте 2. И не люблю по несколько раз переписывать стили как в варианте 3, чтобы не нагружать процессор слабых устройств.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.