Первая проблема видна здесь: 450px до 760px
Я пока не могу вставлять картинки, но похоже, что ссылка работает, мои извинения. Вы можете видеть, что у последнего li скрыта граница справа. Это так, как задумано. Вот код для этого размера экрана:
@media screen and (min-width: 450px){
nav li{
display: inline-block;
border-right: 1px solid #f6dde3;
padding-right: 3px;
}
nav li:last-of-type{
border-right: hidden;
}
}
Проблема в том, что при размере выше 760 пикселей я теряю правую границу. Я пытаюсь сделать простой похожий на кнопки образ. Вот пи c: > 760px . Вы можете видеть последнее окно, которое по-прежнему скрыто. Вот код медиазапроса для экранов большего размера:
@media screen and (min-width: 760px){
nav li{
padding-right: none;
}
nav ul li ul li{
border: 1px solid #f6dde3;
width: 140px;
}
}
Я пытался сделать: последний тип с nav li и показать рамку вправо как видимую или в виде блока, inline et c , Если я удаляю последний из типов на> 450px, он показывает не только границу поля кнопок, но и дополнительную созданную границу только для последнего li. Вот HTML:
<nav>
<ul>
<li><span id="menulabel">MENU</span>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="adoptapet.html">adopt a pet</a></li>
<li><a href="#">community</a></li>
<li><a href="news.html">news</a></li>
<li><a href="#">contact us</a></li>
</ul>
</li>
</ul>
</nav>
Кнопка МЕНЮ скрыта на всем, что больше, чем 450px, я удалил ее и пару других вещей из кода для более чистого вида, который не повлияет на эту проблему , Спасибо за любые идеи! Я читал о размерах экрана и видел несколько других проблем, близких к этому, но не могу найти маленький самородок, который, я уверен, прост для этого.