0

我创建了一个 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 上看起来不错。但在第二个桌子被推倒。

我也尝试过“位置：绝对”，但很难将其对齐在右侧。

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

4

1 回答 1

1

EDIT: Tables have default styles applied to them by the browser. To solve this specific problem on your second fiddle (yellow-orange one), you need to set the table's border-spacing: 0;.

Perhaps you can turn to CSS resets if these pre-set properties annoy you.

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

I think you might have overlooked the fact that ul's and ol's have a default styling applied to them, which differs from browser to browser. Some might set padding, others margin (I haven't tested it myself).

All you need to do is add this to your CSS: (tested and working in your fiddle)

ul {
  padding: 0;
  margin: 0;
}

Your h2 element and table element respond differently to the float of the ul. If you set your h2 CSS to clear:both the margin from the ul will also impact it. The table element for some reason considers the margin of your floated element (I can't explain why).

NB: // are not valid CSS comments. Use /* */.

If you absolutely want the menu to be removed from the flow, set the parent div to position: relative; and the ul to position: absolute; margin-left: 80%; margin-top: 0%;.

The disadvantage of this method is that you have to approximately estimate the menu's length. (in this case I took 80% margin, so estimated at 20%) . Given that your divs have dynamic widths, it will also cause the menu to float outside of the table when the viewport is too small. You can prevent this by setting the div to overflow: hidden;, but overall...

If this were a problem I had to solve, I would simply stick with the float: right; and leave some whitespace between the menu and the next elements...

于 2013-06-06T14:47:26.643 回答