Ul li, отступы вложения, для каждого уровня приходиться дописывать стиль, как этого не делать?

Всем привет.
Прям не знаю как правильно задать вопрос темы, там длинный текст нельзя писать.

Суть такая, есть у нас каталог с уровнями.
Чтобы для каждого уровня глубины сделать отступ, приходиться в css дописывать стили и добавлять ul li, ну и выходит такая мазайка: li ul li ul li ul li ul li.

<ul class="usp">
  <li><a title="">1 Услуга апапавпав <b><strong>1000</strong> руб</b></a>
    <ul>
      <li><a title="">2 Услуга апапавпав</a>
        <ul>
          <li><a title="">3 Услуга апапавпав</a>
            <ul>
              <li><a title="">4 Услуга апапавпав</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>


css
.usp li {
  color: #000;
  font-weight: 600;
}
.usp li a {
  cursor: default;
  padding: 15px 20px 15px 20px;
  position: relative;
  display: block;
  border: 1px solid #EEEEEE;
  margin-bottom: -1px;
}
.usp li a b{
  font-weight: 400;
  float: right;
}
.usp li a b strong{
font-size: 16px;
  color: #FF2525;
}
.usp li ul li a{
padding-left: 35px;
}
.usp li ul li ul li a{
  padding-left: 45px;
}
.usp li ul li ul li ul li a{
  padding-left: 55px;
}
.usp li ul li ul li ul li ul li a{
  padding-left: 65px;
}


Как сделать так чтобы не приходилось для каждого уровня дописывать в css ul li ?
  • Вопрос задан
  • 1131 просмотр
Решения вопроса 2
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
Не обнулять отступы и стили.
Ответ написан
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
padding добавляется к a, что является неправильным подходом: браузер не видит вложенности в данном случае. Лучшим решением будет убрать padding у a и переставить его на вложенные ul. Например, так:

ul.usp {
	padding: 0;
	
	ul {
		padding-left: 20px;
	}
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы