Как выбрать мои загрузочные навигационные ссылки для правильного позиционирования?

Question

Итак, у меня есть загрузочный навигатор, и я ранее выбирал ссылки с классом диапазона «nav-text». Это работает для размера шрифта и цвета, но когда я пытаюсь применить маржу или отступы, я не могу получить ответ. Я попытался выбрать ссылки для позиционирования по-разному, поэтому я перешел сюда.

Вот HTML:

<ul class="nav navbar-nav navbar-right"> 

    <li><a href="physicians.php"><span class="nav-text">Physicians</span></a></li> 
    <li><a href="location.php"><span class="nav-text">Directions</span></a></li> 
    <li><a href="services.php"><span class="nav-text">Services</span></a></li> 
    <li><a href="faq.php"><span class="nav-text">FAQ</span></a></li> 
    <li><a href="privacy.php"><span class="nav-text">Privacy</span></a></li> 
    <li><a href="health.php"><span class="nav-text">Health Links</span></a></li> 
    <li><a href="policy.php"><span class="nav-text">Office Policy</span></a></li> 
    <li><a href="https://webview.mckesson.com/####/"><span class="nav-text" id="view">W***** Login</span></a></li> 
    </ul> 

Так как я бы дать .nav-текстовые ссылки правильное позиционирование? Я был успешным в том, что ссылка id #view оставила прописью. Но верхняя часть дополнения тоже не работает для этого?

Вот вся Navbar, если вам это нужно (самозагрузки)

<header> 
<nav class="navbar navbar-default"> 
<div class="container-fluid"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="index.php"><img src="#" id="logo"></a> 
</div> 

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav navbar-right"> 

    <li><a href="physicians.php"><span class="nav-text">Physicians</span></a></li> 
    <li><a href="location.php"><span class="nav-text">Directions</span></a></li> 
    <li><a href="services.php"><span class="nav-text">Services</span></a></li> 
    <li><a href="faq.php"><span class="nav-text">FAQ</span></a></li> 
    <li><a href="privacy.php"><span class="nav-text">Privacy</span></a></li> 
    <li><a href="health.php"><span class="nav-text">Health Links</span></a></li> 
    <li><a href="policy.php"><span class="nav-text">Office Policy</span></a></li> 
    <li><a href="https://webview.mckesson.com/mvfpi/"><span class="nav-text" id="webview">Webview Login</span></a></li> 
    </ul> 
</div> 
</div> 
</nav> 
</header> 

Fiddle

Answer 1

Чтобы добавить отступ/маржу ваши ссылки использовать:

.nav li a { 
    padding: 45px; 
    margin-right: 20px; 
} 

Например.

Ваши обновленные jsFiddle