Question

Bonjour,

I would like to make sure to always have the same padding in <li>, but when it's a link that the padding is in the <a> (for large selection area).

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>

I want padding in the <a> when it exists and no more in the <li>
And when there is no <a> the padding is in the <li>

Answer 1

解决方法是在a上使用负边距，然后a的填充位置与li的位置相同。

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>

Answer 2

有几种方法可以做到这一点，Lister先生的答案已经足够，但我反对使用负边距，所以我认为我会提供另外两种选择。

仅限CSS（适用于所有浏览器）：

在这个例子中，我在所有不是<a>的li内容中添加了一个范围。我使用calc来计算出每个<li>的高度。

还有一个CSS变量，这样你就可以在一个地方更改填充，如果需要可以省略。

:root {
  --li-padding: 1em;
}

li {
  height: calc(100% + (var(--li-padding) * 2));
  line-height: calc(100% + (var(--li-padding) * 2));
  background: tomato;
}

li>* {
  padding: 0 var(--li-padding);
}

li a {
  display: inline-block;
  background: rgba(255, 255, 255, 0.6);
}

<ul>
  <li><a href="#">Line 1</a></li>
  <li><span>Line 2</span></li>
  <li><a href="#">Line 3</a></li>
</ul>

仅限CSS（无浏览器，尚未）：

这是CSS Level 4的建议标准，目前，它不在任何浏览器中，但我认为值得一提，以便将来进行验证。

Mozilla Documentation

li:not(::has(> a)) {
  padding: 1em;
}

li>a {
  padding: 1em;
}

<ul>
  <li><a href="#">Line 1</a></li>
  <li>Line 2</li>
  <li><a href="#">Line 3</a></li>
</ul>

使用Javascript：

使用javascript，我们可以查看所有<li>标记，并根据它们包含的内容决定我们要做什么，这是一个简单的示例（我再次使用颜色来显示<a>标记的起始位置）。

let liSelector = document.querySelectorAll('li');

for (let i = 0; i < liSelector.length; i++) {
  let str = liSelector[i].innerHTML;
  if (str.includes("</a>")) {
    liSelector[i].querySelector('a').style.padding = "1em";
    liSelector[i].querySelector('a').style.display = "inline-block";
  } else {
    liSelector[i].style.padding = "1em";
  }
}

li {
  background: tomato;
}

li a {
  background: rgba(255, 255, 255, 0.6);
}

<ul>
  <li><a href="#">Line 1</a></li>
  <li>Line 2</li>
  <li><a href="#">Line 3</a></li>
</ul>

<强>要点：莱斯特先生的答案应该是您所需要的，但我认为拥有所有选项是有益的，因为它有助于理解问题并解决未来的其他问题，我希望您能找到这个有用的

Answer 3

在这里你进入jQUery：

$('li').each(function() {
    if($(this).find('a').length) {
       $(this).addClass('extrapadding');
    }
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href='#'>Text</a></li>
<li>Text</li>
<li><a href='#'>Text</a></li>
</ul>

选择<li>没有<a>

3 个答案: