Question

我对编码完全陌生，只做了大约8个教程视频，看我是否对此有足够的天赋，然后回到学校进行职业生涯的第五次尝试。因此，当我编码时，我们进入“代码图像部分”，然后在下面键入提供的代码，但是唯一受影响的值是颜色，所以我不确定是什么干扰了它。

我尝试重新创建代码，删除可能会干扰代码但没有运气的部分。

   header .logo a {
        background: red;
        width: 300px;
        text-indent: -99999999999px;
    }

    <header>
        <nav>
            <ul>
                <li><a href= "1.html">1</a></li>
                <li><a href= "2.html">2</a></li>
                <li class="logo"><a href= "index.html">Artisan</a></li>
                <li><a href= "3.html">3</a></li>
                <li><a href= "4.html">4</a></li>
            </ul>
        </nav>

我希望通过缩进来删除文本，并扩展边界框，但是似乎只有颜色会改变。

Answer 1

简短的答案是：给您的<a>块布局…

header .logo a {
  background: red;
  width: 300px;
  text-indent: -99999999999px;
  display: inline-block; // or `display: block`
}

<a>默认继承inline布局。具有inline布局的元素会忽略某些CSS规则-即高度和宽度，这实际上意味着依赖于基于有限坐标（例如，您的text-indent）定位的任何规则都将不起作用。您可以在this article on display on css-tricks.com中进一步了解inline和block布局模型。

header .logo a {
  background: red;
  width: 300px;
  text-indent: -99999999999px;
  display: inline-block;
}

<header>
  <nav>
    <ul>
      <li><a href="1.html">1</a></li>
      <li><a href="2.html">2</a></li>
      <li class="logo"><a href="index.html">Artisan</a></li>
      <li><a href="3.html">3</a></li>
      <li><a href="4.html">4</a></li>
    </ul>
  </nav>
</header>

保存并刷新所有内容后，不会发生任何更改

1 个答案: