<table> 在 <div> 里面在 <div>

Question

我正在尝试在网页顶部创建一个导航栏，这是我通过创建 <div> 完成的。在其中我有另一个 <div> 用于放置导航按钮的位置。在导航按钮 <div> 内，我有一个 table，其中包含一些应该是按钮的文本。我为所有 <div> 制作了边框，并在 Table.

周围制作了边框

我的问题是：每次我尝试使用绝对定位将导航按钮的 <div> 定位在导航栏 <div> 内时，导航按钮的 <div> 跳到导航栏 <div>。然后Navigation Bar<div>变成页面顶部的一条很小的线

这是 HTML:

<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

最后，我觉得你的问题源于 btn 栏 div 绝对。此 css 不会折叠任何父容器并将您的按钮居中。 table 唯一的好处之一是它的垂直和水平居中行为 LOL。根据需要设置 table 宽度，按钮将伸展并保持居中。

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 2

因为你将Nav和Button bar都设置为Absolute，所以你需要明确指定高度，否则容器会崩溃，例如

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

更好的解决方案是使 BtnBar 成为相对的，这样 NavBar 会根据其内容的大小自行调整大小

Answer 3

将某些内容设置为绝对位置会将其置于文档的正常流动之外。你应该只在最外层使用绝对位置 div.

在我看来，问题更大的是您使用 table 进行布局。这是一个非常糟糕的做法。

试试这样的方法：

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

Fiddle: http://fiddle.jshell.net/zwop5o6L/

Answer 4

您可以通过使用填充来放置导航栏来避免复杂化，您还可以使用 css 创建按钮并填充按钮的左侧以复制 table 这将使网站更易于访问

<table> 在 <div> 里面在 <div>

<table> inside a <div> inside a <div>

html

css

html-table

<table> 在 <div> 里面 在 <div>

<table> inside a <div> inside a <div>

html

css

html-table

<table> 在 <div> 里面在 <div>