css - 将图标放在右上 Angular 以将其从流程中删除

我创建了一个DIV，该DIV的右上角必须具有两个链接（“菜单”和“选项”）：

<div class="Clear">
    <ul class="Clear">
      <li><a>Menu</a></li>
      <li><a>Options</a></li>
    </ul>
    <h2>Header</h2>
    <p>Text</p>
</div>

为了将ul对准右边，我使用了“ float：right”。

在线示例位于：http://jsfiddle.net/y2hhm/8/

每个链接文本将使用背景图片替换为图标图片。

在第一个DIV上看起来还不错。但是第二次，桌子被推下。

我也尝试过“ position：absolute”，但是很难在右边对齐它。

有谁知道如何使菜单/选项列表在两者中看起来相同？

最佳答案

编辑：
表具有浏览器应用于其的默认样式。要在第二个小提琴（橙黄色）上解决此特定问题，您需要设置表格的border-spacing: 0;。

如果这些预设属性使您烦恼，也许您可​​以转向CSS重置。

-----------------------------

我认为您可能忽略了ul和ol对其应用了默认样式的事实，不同浏览器对此有所不同。有些人可能设置填充，其他人设置空白（我自己还没有测试过）。

您需要做的就是将其添加到您的CSS中：（经过测试并在小提琴中工作）

ul {
  padding: 0;
  margin: 0;
}

您的h2元素和table元素对ul的浮点数的响应不同。如果将h2 CSS设置为clear:both，则ul的边距也会对其产生影响。由于某种原因，table元素考虑了浮动元素的边距（我无法解释原因）。

注意：//不是有效的CSS注释。采用 /* */。

如果您绝对希望从流中删除菜单，请将父div设置为position: relative;，将ul设置为position: absolute; margin-left: 80%; margin-top: 0%;。

这种方法的缺点是您必须大约估算菜单的长度。 （在这种情况下，我采取了80％的保证金，因此估计为20％）。鉴于div具有动态宽度，当视口太小时，这也会导致菜单浮动到表格外。您可以通过将div设置为overflow: hidden;来防止这种情况，但是总体而言...

如果这是我必须解决的问题，则只需坚持使用float: right;并在菜单和下一个元素之间保留一些空格...

关于css - 将图标放在右上 Angular 以将其从流程中删除，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16965034/