0

我现在正在设计一个网站，并在顶部有一个用于导航的菜单栏。这一切都是作为一个表格和 CSS 完成的。这适用于所有浏览器，但是，我希望左侧有导航按钮，右侧有登录和主页按钮。

我可以通过将右手按钮放在他们自己的 div 中并使用 position: fixed 元素来定位它来轻松做到这一点。但是，我相信你们都知道，这不适用于 Internet Explorer。由于我的 div 方法一开始是一种变通方法，因此我不想为我的 IE 变通方法添加另一个变通方法。

所以我开始怀疑是否有一种方法可以将整个菜单栏保持在一个表格行而不是两个表格行中，但是让右侧按钮的单元格向右对齐，左侧按钮的单元格在左侧。我认为这比我的 div 工作要整洁得多，并且可以与 IE 一起使用。我不知道这是否可能，我在上面找不到任何东西。任何帮助将不胜感激，即使它与我建议的方法不同。

4

2 回答 2

1

首先，position: fixed无论您向上还是向下滚动，都将帖子保持在浏览器窗口中的这个位置，您确定这是您正在寻找的行为吗？

至于您的问题：您应该制作一个更大的 div 来包围两个较小的 div 并将其放置在页面顶部。这是一个例子：

<div id="top-bar">
<div id="rightbuttons">Three | Four</div>
<div id="leftbuttons">One | Two</div>
</div>

对于此示例，我将把整个栏放在顶部：

#top-bar { position: absolute; width: 100%; left:0; right:0; }

然后，为了定位内边栏，我将使用一个float属性：该属性允许元素“浮动”在任一位置。

#rightbuttons { float: right; }
#leftbuttons { float: left; }

然后作为“hack”以确保浮动 div 仍然使外部 div 根据其内容保持高度，我们添加overflow:hidden到它

#top-bar { position: absolute; width: 100%; left:0; right:0; verflow: hidden; }

这是一个活生生的例子。

于 2012-06-21T19:52:35.713 回答
0

这对您来说是一个非常简单的解决方法。如果您知道如何将 CSS 放在单独的文件中，请执行此操作，否则您可以将其放在 head 部分。

HTML：

<table>
<tr>
    <td>Nav 1</td>
    <td>Nav 2</td>
    <td>Nav 3</td>
    <td class="right">Login</td>
    <td class="right">Home</td>
</tr>
</table>

CSS：

table {
    width: 100%;
}

.right {
    float:right;
}

搜索引擎不太喜欢它，但您也可以像这样内联发布它：

<table>
<tr>
    <td>Nav 1</td>
    <td>Nav 2</td>
    <td>Nav 3</td>
    <td style="float:right">Login</td>
    <td style="float:right">Home</td>
</tr>
</table>
于 2012-06-21T20:00:51.963 回答