Question

我在下拉菜单中使用了以下代码：

.menu-label {
    font-size: 0;
}

.menu-label.coming-soon:before {
    background: url(lb-coming-soon1.png);
    width: 40px;
    height: 20px;
    margin-top: -10px;
}

<ul>
    <li><a href="#">Soap Company</a><span class="menu-label coming-soon"></span></li>
    <li><a href="#">Apparel <span class="menu-label coming-soon"></span></a></li>
</ul>

我要做的是让菜单显示文本链接左对齐，相关的“即将推出”图片右对齐。

现在，它看起来脱节了。我不确定在css中如何改变/改变什么来使对齐工作成为欲望。

Answer 1

您可以使用flexbox和justify-content分隔元素。

li { display: flex; justify-content: space-between; }

看起来您在列表项之间存在HTML差异。将第二个更改为

<li><a href="#">Apparel</a> <span class="menu-label coming-soon"></span></li>

Answer 2

根据您想要支持的结构和浏览器，有一些方法。

示例：

<ul>
  <li class="float">
    <a href="#" class="float">float a</a>
    <span class="menu-label coming-soon"></span>
  </li>
  <li class="flex">
    <a href="#" >flex li</a>
    <span class="menu-label coming-soon"></span>
  </li>
  <li>
    <a href="#" class="flex">flex a
      <span class="menu-label coming-soon"></span>
    </a>
  </li>
  <li>
    <a href="#" title="buggy, text needs to be wrapped" class="justify">justify  a
      <span class="menu-label coming-soon"></span>
    </a>
  </li>
  <li class="justifyli">
    <a href="#">justify  li</a>
    <span class="menu-label coming-soon"></span>
  </li>
</ul>

{{1}}

如何左对齐所有LI链接，但右边调整同一LI链接中的图片？

2 个答案: