Как добавить CSS в тег <li> - PullRequest
Новая
       22

Как добавить CSS в тег <li>

0 голосов
/ 30 марта 2019

Я пытаюсь добавить настраиваемый отступ для изображений в панели навигации справа от Bootstrap.Я хочу оставить отступ слева / справа для левой группы на 15 пикселей (или любой другой по умолчанию в navbar) и правой группы на 4 пикселя.

    <style>
       li.custom { 
       padding-top: 14px;
       padding-left: 2px;
       padding-right: 2px;
       background-color: red;
      }
    </style> 

    <nav class="navbar">
    <!-- Navbar links left side  -->
    <ul class="nav navbar-nav">
        <li>Link1</li>
        <li>Link2</li>
    </ul>


    <ul class="nav navbar-nav navbar-right"> 
        <li class="custom"><a href="#"><img style="height: 15px;"src="image1.jpg"></a></li>
        <li class="custom"><a href="#"><img style="height: 15px;"src="image2.jpg"></a></li>
    </ul>
    </nav>

Если я переопределить на уровне навигации, он применяет изменения ко всем элементам (слева и справа).Я также попытался назначить пользовательский класс для элементов на правой стороне, но это не сработало.Он сохранил отступы по умолчанию.

Я ожидаю отступы 4px на правой стороне, но отступы по-прежнему остаются по умолчанию.

Ответы [ 2 ]

0 голосов
/ 30 марта 2019

Если вы хотите применить только на правой стороне. Воспользуйтесь navbar-right как часть вашего селектора. Как это: 

<style>
       .navbar-right > li { 
       padding-top: 14px;
       padding-left: 2px;
       padding-right: 2px;
       background-color: red;
      }
</style>

Вам не нужно создавать пользовательский класс.

0 голосов
/ 30 марта 2019

Если вы уверены, что хотите переопределить другие определения стилей с помощью своего пользовательского класса, просто укажите !important, как показано ниже: 

<style type="text/css">
       li.custom { 
       padding-top: 14px !important;
       padding-left: 2px;
       padding-right: 2px;
       background-color: red;
      }
</style>

Проверьте JS Fiddle здесь

Если вы используете CSS с js-фреймворком, например angular, попробуйте добавить его в файл шаблона стиля модуля или рассмотрите возможность изменения стиля в javascript.

...