кнопки навигации не отображаются в строке

html css inline nav

59 просмотра

1 ответ

Итак, моя навигация настроена на inline-block, но по какой-то причине в сафари это выглядит так. В Chrome он работает нормально, но я не могу понять, что мне нужно изменить. Это исправляет себя, когда я изменяю размер моего окна веб-браузера. Любая помощь будет оценена.

* Обратите внимание, что я использую Сьюзи с этим, поэтому есть @include span(12)

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

Требуемый выходной введите описание изображения здесь CSS:

nav{
     @include span(12);
nav ul{ 
     @include span(12);
     list-style: none;
     display: inline;
     float: right;

}

li{ 
   display: inline;
   float: right;
   padding: 2%;
}
}


nav ul li a {
     display: inline-block;
     text-decoration: none;
     color: white;
     background-color: #FF4343;
     border-radius: 49px; 
     -moz-border-radius: 49px; 
     -webkit-border-radius: 49px; 
     border: 0px solid #EB0000;
     width: 100%;
     height: auto;
     text-align: center;
     padding: 10%;
     font-family: 'Montserrat', sans-serif;
     font-size: small;
     text-align: center;
}

HTML:

<nav id="desktop-nav">
 <ul id="desktop-nav">
 <li><a href="#">Our Team</a></li>
 <li><a class="scroll" id="green" href="#form-header">Contact Us</a>    </li>
 <li><a href="location.html">Location</a></li>
 <li><a href="#">Our History</a></li>
 <li><a href="services.html">Our Services</a></li>
 <li><a href="index.html">Home</a></li>
 </ul>
 </nav>
Автор: ethanfox27 Источник Размещён: 08.11.2019 11:29

Ответы (1)


0 плюса

Решение

Попробуй сделать width:100%;. Это должно заставить его пройти весь путь.

Автор: stephenpassero Размещён: 20.08.2016 03:10
Вопросы из категории :
32x32