Question

我正在使用Drupal，我在页面顶部有一个菜单栏，其宽度由我添加的任何菜单项定义。

因此，例如，如果唯一的链接是“Home”，它的宽度将非常小。但如果我添加“联系人”，“关于我们”等，其宽度将会增加。

我希望能够在包含菜单栏（menuDiv）的div下面添加另一个div（称之为newDiv），以便newDiv与menuDiv具有完全相同的宽度。

所以我猜我要问的是，如何设置newDiv的宽度与menuDiv的宽度相同，而不必明确设置menuDiv的宽度？

这张照片显示了我在说什么：

在这个链接上，有菜单本身的图片（menuDiv），以及它下面的Div图片（newDiv）。如何使用CSS实现此类布局，而不是使用：

<table>i should be a div</table>

我在CSS中尝试了一些东西，但似乎没有任何东西能像我想要的那样工作。任何帮助将不胜感激。

Answer 1

将它们包裹在display: inline-block;的块中。这将使其宽度适应其子项的最大宽度，子<div>元素将与其父项一样宽。

例如：

<div id="outer">
    <div>Here is some stuff and things.</div>
    <div>Here is some stuff and things. Here is some stuff and things.</div>
</div>

和

#outer {
    border: 1px solid red;
    display: inline-block;
}
#outer div {
    border: 1px solid green;
}

Answer 2

您需要在父容器的css中使用绝对定位。可以找到更多here。

    #container { position:absolute; }
    .item { padding: 0 0 0 0; }