如何依次增加层次结构的Padding属性的CSS值？

Question

我对每个填充层次结构级别都有硬编码的填充。

我需要任何级别的解决方案，而无需为每个级别进行硬编码填充。

.jdm-nav li {
    font-size: 16px;
    position: relative;
}

.jdm-nav li a {
    padding-left: 15px;
}

.jdm-nav li li a {
    padding-left: 30px;
}

.jdm-nav li li li a {
    padding-left: 45px;
}

.jdm-nav li li li li a {
    padding-left: 60px;
}

li li li li ... a

每个下一步都可以增加15px.

完整代码示例。移动菜单具有通过单击项目右上角的下拉图标来下拉每个项目的功能。如果有要扩展的项目。

.jdm-nav {
  background-color: white;
  width: 100%;
  padding: 0;
}

.jdm-nav ul {
  padding: 0;
}

.jdm-nav {
  list-style: none;
}

.jdm-nav li {
  list-style: none;
}

.jdm-nav ul {
  margin: 0;
}

.jdm-nav a {
  text-align: left;
  display: flex;
  color: rgb(76, 92, 104);
  font-weight: 500;
  padding: .5em 0;
  font-size: 16px;
  border-bottom: 1px solid rgba(76, 92, 104, 0.1);
}

.jdm-nav li {
  font-size: 16px;
  position: relative !important;
}

.jdm-nav li a {
  padding-left: 15px;
}

.jdm-nav li li a {
  padding-left: 30px;
}

.jdm-nav li li li a {
  padding-left: 45px;
}

.jdm-nav li li li li a {
  padding-left: 60px;
}

.jdm-nav li {
  position: relative;
}

.jdm-nav li>[data-jdm-sub-menu-switcher] {
  font-size: 13px;
  display: flex;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid rgba(76, 92, 104, 0.1);
  position: relative;
}

.jdm-nav li {
  position: relative !important;
}

.jdm-nav li.menu-item-has-children>ul {
  max-height: 0;
  overflow: hidden;
  transition: 150ms max-height ease-out;
}

.jdm-nav li.menu-item-has-children>ul[data-jdm-state="expanded"] {
  max-height: initial;
}

.jdm-nav li.menu-item-has-children> :first-child {
  grid-column: 1;
}

.jdm-nav li.menu-item-has-children>[data-jdm-sub-menu-switcher] {
  grid-column: 2;
}

.jdm-nav li.menu-item-has-children>ul {
  grid-row: 2;
  grid-column-start: 1;
  grid-column-end: 3;
}

.jdm-nav li>[data-jdm-sub-menu-switcher]::after {
  position: absolute;
}

.jdm-nav li>[data-jdm-sub-menu-switcher]::after {
  position: absolute;
  width: 1em;
  height: 1em;
  content: '';
  clip-path: url(#prefix-mobile-dropdown-clip-mask);
  font-size: 13px;
  background-color: rgb(76, 92, 104);
  display: inline-flex;
  top: 50%;
  right: 50%;
  transform: translateY(-50%) translateX(50%);
}

.jdm-nav li.menu-item-has-children {
  display: grid;
  grid-template-columns: 100fr 15fr;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<div id="prefix-mobile-menu" class="mobile-menu-area prefix-mobile-menu" data-prefix-status="collapsed">
  <nav id="mobile-menu" class="jdm-nav">
    <ul id="primary-menu" class="menu-overflow">
      <li id="menu-item-2420" class="menu-item-has-children">
        <a href="1">1</a>
        <button data-jdm-sub-menu-switcher=""></button>
        <ul class="sub-menu" style="" data-jdm-state="expanded">
          <li id="menu-item-2418" class="menu-item-has-children"><a href="#">1.1</a>
            <button data-jdm-sub-menu-switcher=""></button>
            <ul class="sub-menu" style="" data-jdm-state="expanded">
              <li id="menu-item-2434" class="menu-item-has-children"><a href="1.1">1.1.1</a>
                <button data-jdm-sub-menu-switcher=""></button>
                <ul class="sub-menu">
                  <li id="menu-item-2435">
                    <a href="1.1.1.1">1.1.1.1</a>
                  </li>
                  <li id="menu-item-2436"><a href="1.1.1.2">1.1.1.2</a>
                  </li>
                  <li id="menu-item-2437"><a href="1.1.1.3/">1.1.1.3</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="menu-item-1832"><a href="2/">2</a></li>
    </ul>
  </nav>
  <svg width="0" height="0" viewBox="0 0 448 512">
		<defs>
			<clipPath
					viewbox="0 0 448 512"
					transform="scale(0.00223, 0.00195)"
					clipPathUnits="objectBoundingBox"
					id="prefix-mobile-dropdown-clip-mask">
				<path fill="#000000"
						d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"
						class=""></path>
			</clipPath>
		</defs>
	</svg>
</div>

Answer 1

将填充物放在li上，并以较大的固定量将a的左侧伸出。

插图：

body > ul {
  border: 1px solid #eee;
  border-radius: 2px;
  margin: 1em;
  padding: 1em;
  overflow: hidden;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding-left: 15px;
}

a {
  display: block;
  margin-left: -150px;
  margin-right: -1em;
  padding-left: 150px;
}

a:hover {
    background-color: #cff;
}

<ul>
  <li>
    <a href="javascript:;">nested</a>
    <ul>
      <li>
        <a href="javascript:;">navigation</a>
        <ul>
          <li>
            <a href="javascript:;">forever</a>
            <ul>
              <li>
                <a href="javascript:;">and</a>
                <ul>
                  <li>
                    <a href="javascript:;">ever</a>
                </ul>
            </ul>
        </ul>
      <li>
        <a href="javascript:;">foo</a>
      <li>
        <a href="javascript:;">bar</a>
    </ul>
  <li>
    <a href="javascript:;">baz</a>
</ul>

（注意每个链接的可点击区域如何一直延伸到左侧。）

Answer 2

您可以使用此代码来解决您的问题

.jdm-nav li {
    font-size: 16px;
    position: relative;
}

.jdm-nav li{
   font-size:1.2em;
   padding-left: 3em;
}
.jdm-nav li a {
    
    background-color:red;
    font-size:16px;
}

<ul class="jdm-nav">
  <li>
    <a>Item1</a>
    <ul>
    <li>
      <a>Item2</a>
      <ul>
        <li>
          <a>Item3</a>
          
        </li>
      </ul>
    </li>
    </ul>
  </li>
</ul>

Answer 3

使用css的伪函数将每个孩子的填充增加15px。