Here is a live example

Question

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

我可以通过将右手按钮放在他们自己的div中，然后使用position：fixed元素来定位它。但是，我相信大家都知道，这不适用于Internet Explorer。由于我的div方法是开始时的各种工作，我不想为IE工作添加另一个工作。

所以我开始想知道是否有办法将整个菜单栏保留在一个表行而不是两个，但右手按钮的单元格对齐右侧，左侧按钮的单元格对齐左边。我觉得这比我的div工作要整洁得多，而且它适用于IE。我不知道它是否有可能，但我找不到任何东西。任何帮助都会受到赞赏，即使它与我建议的方法不同。

Answer 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; }

Here is a live example

Answer 2

这对您来说非常简单。如果您知道如何将CSS放在单独的文件中，那么您可以将它放在头部。

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>

我可以在页面的每一侧都有一个包含单元格的表格行吗？

2 个答案:

Here is a live example