时间戳

首页 > 解决方案 > 添加href后“文本缩进”停止工作

html - 添加href后“文本缩进”停止工作

问题描述

我对 CSS 很陌生，我正在尝试使用“text-indent”方法隐藏一些文本，但是在添加<a>-tag 之后它就不再起作用了。

我现在得到了我的 img 和文本，#english{}我没有得到文本，但<a>它不起作用。

text-transform 之类的东西工作得很好，所以我认为我的目标是正确的部分。
我尝试text-align: none;在text-indent:.

nav ul {
  text-align: center;
}

nav li {
  display: inline-block;
  font-size: large;
  text-transform: uppercase;
  width: 160px;
}

nav li ul {
  display: inline-flex;
  width: 100px;
}

#english a {
  background-image: url('images/languages/english.png');
  background-repeat: no-repeat;
  text-indent: -9999999px;
}

#german a {
  background-image: url('images/languages/german.png');
  background-repeat: no-repeat;
  text-indent: -9999999px;
}

#chinese a {
  background-image: url('images/languages/chinese.png');
  background-repeat: no-repeat;
  text-indent: -9999999px;
}
<nav>
  <ul>
    <li>Home</li>
    <li>Biografie</li>
    <li>Termine</li>
    <li>Medien</li>
    <li>Kontakt</li>
    <li>
      <ul>
        <li id="english"><a href="en/home.html">english</a></li>
        <li id="german"><a href="deutsch.html">german</a></li>
        <li id="chinese"><a href="chinesisch.html">chinese</a></li>
      </ul>
    </li>

  </ul>
</nav>

标签： htmlcsstext-indent

解决方案

https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

text-indent CSS 属性设置放置在块中文本行之前的空白空间（缩进）的长度。

水平间距是相对于包含块级元素的内容框的左（或右，对于从右到左的布局）边缘。

所以你需要一个块级元素

nav ul {
  text-align: center;
}

nav li {
  display: inline-block;
  font-size: large;
  text-transform: uppercase;
  width: 160px;
}

nav li ul {
  display: inline-flex;
  width: 100px;
}

nav li ul li {
  display: inline-block;
  background-repeat: no-repeat;
  text-indent: -9999999px;
}

#english a {
  background-image: url('images/languages/english.png');
}

#german a {
  background-image: url('images/languages/german.png');
}

#chinese a {
  background-image: url('images/languages/chinese.png');
}
<nav>
  <ul>
    <li>Home</li>
    <li>Biografie</li>
    <li>Termine</li>
    <li>Medien</li>
    <li>Kontakt</li>
    <li>
      <ul>
        <li id="english"><a href="en/home.html">english</a></li>
        <li id="german"><a href="deutsch.html">german</a></li>
        <li id="chinese"><a href="chinesisch.html">chinese</a></li>
      </ul>
    </li>

  </ul>
</nav>

推荐阅读