Question

尝试在CSS中选择“联系人”li并添加正确的边距。

.navLinks #contacts {
    margin-right: 20px;
}

<ul class="navLinks">
 <li id="contacts"><a href="contacts.html">contacts</a></li>
 <li id="about"><a href="about.html">about</a></li>
 <li id="index"><a href="index.html">home</a></li>
</ul>

我还尝试使用.navlinks li #contacts和#contacts选择它。似乎都没有用;我不确定为什么。

Answer 1

li元素是一个整数宽度为100％的块元素;这意味着它伸展到行的整个宽度。如果要在其上使用边距，则需要为其添加width属性，或者需要显示属性inline。

试试这个;你会看到效果。

.navLinks #contacts{
  margin-left: 200px;
  margin-right: 200px;
  color: red;
  background: red;
  width:200px;
}

<ul class="navLinks">
  <li id="contacts"><a href="contacts.html">contacts</a></li>
  <li id="about"><a href="about.html">about</a></li>
  <li id="index"><a href="index.html">home</a></li>
</ul>

Answer 2

保证金权利似乎不对。因为无论如何，你无法看到，因为这是在左侧。从navlinks引用联系人ID没有错。也许你希望它向右移动一点。对于那个使用margin-left

.navLinks #contacts {
  margin-left: 20px;
}

<ul class="navLinks">
  <li id="contacts"><a href="contacts.html">contacts</a></li>
  <li id="about"><a href="about.html">about</a></li>
  <li id="index"><a href="index.html">home</a></li>
</ul>

.navLinks #contacts {
  margin-left: -20px;
}

<ul class="navLinks">
  <li id="contacts"><a href="contacts.html">contacts</a></li>
  <li id="about"><a href="about.html">about</a></li>
  <li id="index"><a href="index.html">home</a></li>
</ul>

如何在带有id修饰符的ul中选择li？

2 个答案: