时间戳

首页 > 解决方案 > 使用html在列表的每个元素中放置多个图标

html - 使用html在列表的每个元素中放置多个图标

问题描述

我想在每个元素的左侧显示多个图标，可以选择放置多个或不放置，如果你们都可以指出我正确的方向。

<header>
  <nav>
    <ul>
      <a href="http://localhost:4000/">
        <li class=" current btn-nav ">Blog</li>
      </a>
      <a href="http://localhost:4000/Projects">
        <li class=" btn-nav ">Projects</li>
      </a>
      <a href="http://localhost:4000/About">
        <li class=" btn-nav ">About</li>
      </a>
    </ul>
  </nav>
</header>

谢谢！

标签： htmlcssweb

解决方案

.nav-list {
  display: grid;
}

.btn-nav::before {
  content: "";
}
/* unicode for other symbols can be copied from here */

  <header>
    <nav>
      <div class="nav-list">
        <span class="btn-nav">
          <a href="http://localhost:4000/">
            Blog
          </a>
        </span>
        <span class="btn-nav">
          <a href="http://localhost:4000/Projects">
            Projects
          </a>
        </span>
        <span class="btn-nav">
          <a href="http://localhost:4000/About">
            About
          </a>
        </span>
      </div>
    </nav>
  </header>

您可以使用 ::before css 选择器在 HTML 元素之前添加内容。 工作链接

推荐阅读