Question

我需要制作一个如下所示的菜单：

alt text

上面的条目需要有一个右边距（比方说）20px。

当我添加子菜单时出现问题，特别是像“大菜单项”的红色菜单。顶部菜单需要保持原位，所有子菜单需要在该顶部菜单下居中。但是顶部入口是放大的（这使得绿色部分向右移动）或者子条目不位于顶部入口的中心...... 由于菜单条目是动态的，我无法预测它们有多宽，因此我无法应用任何数学。

此外 - 只有当用户在相应的页面上时，子条目才可见（意味着 - 如果用户在红页上，则绿色部分仅显示«Menu1»）

我可以»在页面加载后使用一些javascript来完成它，但我试图避免这种情况。

我尝试了各种各样的东西，包括负边距和诸如此类的东西 - 但似乎没有任何效果......任何想法？

[编辑]

这里有一些html - 试图像疯了一样摸索没有结果（除了布拉德的一个，但那个不适用于IE）

<div class="center">

            <div class="menu-container">
                <div class="menu-title">Title 1</div>
                <div class="menu-items">
                    Testomat<br />
                    Yo, this is a long text
                </div>
            </div>

            <div class="menu-container">
                <div class="menu-title">Title 1</div>
                <div class="menu-items">
                    Testomat<br />
                    Yo, this is a long text
                </div>
            </div>

        </div>

CSS：

.menu-container{
    width: 100px;
    float: left;
}

.menu-items, .menu-title{
    text-align: center;
}

Answer 1

如果您不关心IE：您是否尝试过使用display:table-cell？

您可以尝试以下方式：

<div class="menu-container">
  <div class="menu-title">
      Menu1
  </div>
  <div class="menu-items">
      <div class="menu-item">large menu item</div>
      <div class="menu-item">sub</div>
      <div class="menu-item">sub</div>
  </div>
</div>

使用CSS：

.menu-container {
   display : table;
   width: 100px;
}

.menu-title, .menu-items {
  display : table-cell;
  width: 100%;
  text-align: center;
}

当然，table-cell中的内容将换行为100px。

Answer 2

我的第一种方法是使用与你自己不同的html标记，但是给出了你正在寻找的视觉效果，或许，语义略有增加：

HTML：

<dl>
    <dt>Title One</dt>
    <dd>Testomat</dd>
    <dd>Yo, this is a long text</dd>
</dl>
<dl>    
    <dt>Title Two</dt>
    <dd>Testomat</dd>
    <dd>Yo, this is a long text</dd>
</dl>

的CSS：

dl {
    width: 100px;
    float: left;
    position: relative;
    text-align: center;
    color: #0f0;
}
dl:nth-child(odd) {
    color: #f00;
}

Demo of the above at JS Fiddle

<小时/> 已修改以添加以下内容：

查看已发布的标记，并应用css：

.menu-container {
    width: 100px;
    float: left;
    text-align: center;
    overflow: hidden;
    color: #0f0;
}

.menu-container:nth-child(odd) {
    color: #f00;
}

JS Fiddle demo

我不确定你为什么遇到困难。不可否认，目前，我只能在Chrome和IE 8（Win XP）上进行测试，但上述情况似乎有效。我在问题描述中遗漏了哪些重要内容？

css - 小div内的超大div

2 个答案:

HTML：

的CSS：