Question

我创建了一个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/

每个链接文本将使用background-image替换为图标图像。

第一个DIV看起来很好。但是第二次，桌子被推倒了。

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

有谁知道如何让两个菜单/选项列表看起来都一样？

Answer 1

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

如果这些预先设置的属性让你烦恼，也许你可以转向CSS重置。

<强> -----------------------------

我认为你可能忽略了这样一个事实：ul和ol有一个默认的样式应用于它们，这与浏览器不同。有些可能会设置填充，其他可能会设置边距（我自己没有测试过）。

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

ul { padding: 0; margin: 0; }

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

NB：//无效的CSS评论。使用/ * * /。

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

此方法的缺点是您必须近似估计菜单的长度。（在这种情况下，我获得了80％的保证金，因此估计为20％）。假设您的div具有动态宽度，当视口太小时，它还会导致菜单浮动到表外。您可以通过将div设置为overflow: hidden;来阻止此操作，但总体而言......

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

右上角的位置图标将其从流中移除

1 个答案: