Question

我只想说我是一位非常业余的网络开发者，如果你能打电话给我的话。

我遇到了一个无法找到答案的大问题。我现在已经工作了2到3天，我知道答案可能很明显，但我似乎无法弄明白。

我要做的是在网页顶部创建一个导航栏，我通过创建<div>来完成。在里面，我有另一个<div>，我想放置我的导航按钮。在导航按钮<div>内，我有一个表格，其中包含一些应该是按钮的文本。我为所有<div>制作了一个边框，我在桌子周围做了一个边框。

我的问题是这样的：每当我尝试使用绝对定位将导航按钮的<div>定位在导航栏<div>内时，导航按钮的<div>会跳到导航边框之外栏<div>。然后导航栏<div>成为页面顶部的一个非常小的行。

让我打印出代码，告诉你发生了什么。

<div id="NavBar">
    <div id="BtnBar">
        <table cellpadding="10" border="1">
            <tr>
                <td>Test #1</td>
                <td>Test #2</td>
                <td>Test #3</td>
                <td>Test #4</td>
            </tr>
        </table>
    </div>
</div>

然后我的CSS有......

body{
    margin: 0px;
}

#NavBar{
    position: absolute;
    top: 0px;
    left: 200px;
    width: 1200px;
    border: 2px solid black;
}

#BtnBar{
    position: absolute;
    left: 454px;
}
table{
    margin: 10px;
}

这是它输出的内容......

http://i.imgur.com/jsP5oby.jpg

谢谢大家！

Answer 1

因为您已将导航和按钮栏都设置为绝对，所以您需要明确指定高度，否则容器将崩溃，例如。

#NavBar{
    position: absolute;
    top: 0px;
    left: 200px;
    width: 1200px;
    height: 50px;
    border: 2px solid black;
}

更好的解决方案是使BtnBar相对，以便NavBar调整自身的大小，无论其内容大小是什么

Answer 2

将某些东西设置为绝对位置会使其超出文档的正常流程。你应该只在最外面的div上使用绝对位置。

我认为更有问题的是你使用表格进行布局。这是一种非常糟糕的做法。

尝试这样的事情：

HTML：

<div class="NavBar">
    <ul class="BtnBar">
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
    </ul>
</div>

CSS：

.NavBar { width: 1200px; border: 2px solid black; margin: auto;}
.BtnBar { display: table; margin: auto;}
.BtnBar li { display: table-cell;  padding: 10px; }

小提琴：http://fiddle.jshell.net/zwop5o6L/

Answer 3

最终，我觉得你的问题源于btn bar div绝对。此css不会折叠任何父容器和中心的按钮。关于桌子的唯一好处之一是它的垂直和水平居中行为LOL。随心所欲地制作桌子宽度，按钮将拉伸并保持居中。

body{
    margin: 0px;
}

#NavBar{
    position: absolute;
    top: 0px;
    left: 200px;
    width: 1200px;
    border: 2px solid black;
}

#BtnBar{

}
table{
    margin: 10px;
    width:400px;
    margin:0 auto;
}

Answer 4

你可以通过使用填充来定位导航栏来避免复杂化，你也可以使用css创建你的按钮并填充按钮的左侧以复制表格，这将使网站更容易访问

在<div> </div> </div> <table> </table>内的<div>内

4 个答案: