Как избавиться от пробелов в моем меню

0

Поэтому я создаю сайт для школьного проекта, и я хочу знать, как я могу удалить пробелы по сторонам меню при наведении курсора на первую и последнюю ссылки. Здесь скрипка.

Извините, если мой код не так уж хорош, я новичок... Также я замечаю, что мое меню остается неподвижным, но все остальное сходит с ума от позиционирования, когда в разных разрешениях. Как мне это получить, поэтому все остается в относительно одинаковой позиции в разных разрешениях?

Благодарю.

О, и вот html:

<body>
    <h1 class='titles'>Phosphorus 4 Dummies</h1>
    <nav>
        <ul class='menu'>
            <li id='home'><a href='#'>Home</li></a>
            <li id='phys'><a href='#'>Phys. Prop.</li></a>
            <li id='chem'><a href='#'>Chem. Prop.</li></a>
            <li id='facts'><a href='#'>Fun Facts</li></a>
        </ul>
    </nav>
    <p class='info'>Phosphorus is a very reactive element in the Nitrogen Group. It has 15 protons, 16 neutrons, and 5 valence electrons. It is a non-metal so it can be found on the right side of the zig-zag along with other non-metals. Its symbol is a simple P.</p>
    <img src='http://images-of-elements.com/red-phosphorus.jpg' id='redPhosphorus' height=300px />

И css:

body {
    margin: 300px;
    padding: 0px;
}

.titles {
    font-size: 72px;
    font-family: Helvetica, sans-serif;
    text-align: center;
    position: relative;
    bottom: 100px;
}

.menu {
    position: relative;
    width: 760px;
    bottom: 330px;
    margin: auto;
    margin-bottom: 0px;
    text-align: center;
    border: 2px solid black;
    border-radius: 5px;
    padding: 0;
    font-size: 0;
}

.menu li {
    font-size: 36px;
    font-family: Helvetica, sans-serif;
    display: inline-block;
    position: relative;
    top: 0;
    float: none;
}

.menu li a {
    text-decoration: none;
    color: black;
    padding-right: 11px;
    padding-left: 11px;
    padding-top: 0px;
    padding-bottom: 1px;
    border-right: 2px solid black;
    margin: 0;
}

.menu li:nth-child(4) a {
    border: none;
}

.menu li a:hover {
    background-color: orange;
}
  • 0
    пожалуйста, включите часть своего кода в вопрос (не просто скрипку).
  • 0
    извините, я новичок здесь, я буду уверен в следующий раз.
Показать ещё 2 комментария
Теги:
whitespace
menu
nav

2 ответа

0

Существует пробел, потому что ваше menu задано в width: 760px, но ваш список меню не подходит полностью, поэтому есть пробел.

Кроме того, чтобы сделать его отзывчивым, вам нужно использовать медиа-запросы.

ОБНОВИТЬ:

Если вы знаете ожидаемые результаты [высота, ширина и т.д.], Вы должны указать <nav> установленную ширину и <ul> для большей ширины, но добавить overflow: hidden и height: 41px

Вот сценарий для экспериментов. У вас не было идеального макета, но я работал с тем, что вы дали. Если кто-нибудь найдет лучшее решение, я был бы более чем счастлив наблюдать.

Поделиться
  • 0
    Так как мне от этого избавиться?
  • 0
    Просто обновил мой ответ скрипкой и кодом. Дело в том, что мое решение заключается в том, что вы должны убедиться, что шрифт не выходит за пределы ширины <nav>, иначе вы его не увидите. Это может быть проблематично, так как разные браузеры различаются при отображении шрифтов.
0

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

<li><a></li></a>

должно быть:

<li><a></a></li>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню