选择没有<a>的<li>

Question

你好,

我想确保始终具有相同的填充<li>,但是当它是填充<a>(在大选择区域中)的链接时.

li a {
  padding: 1rem;
}

li:not(a) {
  padding: 1rem;
}

<ul>
  <li><a href='#'>Text</a></li>
  <li>Text</li>
  <li><a href='#'>Text</a></li>
</ul>

• 我希望填充<a>它存在的时间,而不是更多<li>
• 并且当没有<a>填充物时<li>

Answer 1

解决方案是使用负边距a,然后a填充将与lis的位置相同.

li {
  padding: 1rem;
}

li a {
  margin: -1rem;
  padding: 1rem;
}

<ul>
  <li><a href='#'>Text</a></li>
  <li>Text</li>
  <li><a href='#'>Text</a></li>
</ul>