Question

我正在尝试使用框大小在菜单div内对文本进行水平对齐。

这样的事情：

我的问题是当我尝试放置position: absolute子菜单时，主要文本不尊重左侧子菜单的大小和位置。

以下是jsFiddle中的代码。

<div id="menu">
<div>
    <table>
        <tr>
            <td>Nosotros</td>
        </tr>
        <tr>
           <td> 
             <a>La empresa</a>
             <a>Homologaciones</a>
             <a>Contacto</a>
           </td>
        </tr>
    </table>
</div>
<div>
    <table>
        <tr>
            <td>Servicios</td>
        </tr>
        <tr>
            <td>
              <a>Especialidades</a>
              <a>Vigilancia de la salud</a>
              <a>Formación</a>
            </td>
        </tr>
    </table>
  </div>
</div>
<div>Content div</div>

CSS就是小提琴。

如何将主菜单的子菜单置于盒子大小的中心位置？

在示例中，我使用了table，但我的想法是使用ul和li或divs进行此操作。

Answer 1

我注意到你说你在考虑使用ul / li元素而不是table，我认为这是一个好主意，特别是对于导航类型结构。从语义上讲，这就是导航菜单，链接的列表。

这是一些具有居中菜单/子菜单文本的代码，它还保留隐藏子菜单项的宽度。它不漂亮，你必须调整css才能让它看起来非常完美！

如果内容div的位置不正确，请告诉我，我可能会提出一个解决方案。 ;）

HTML：

<div id="menu_wrapper">
        <ul id="menu">
            <li>Nosotros
                <ul class="submenu">
                    <li><a>La empresa</a></li>
                    <li><a>Homologaciones</a></li>
                    <li><a>Contacto</a></li>
                </ul>   
            </li>

            <li>Servicios
                <ul class="submenu">
                    <li><a>Especialidades</a></li>
                    <li><a>Vigilancia de la salud</a></li>
                    <li><a>Formación</a></li>
                </ul>   
            </li>
        </ul>
</div>
<div>Content div</div>

CSS：

ul
{
    list-style-type:none;    
}

li
{
    border:1px solid black;
    text-align:center;
}

.submenu
{
    padding:0;
    visibility:hidden;
    height:0;
}

#menu > li
{
    display:inline-block;
    border:1px solid black;
}

#menu > li:hover .submenu
{
    visibility:visible;
}

JFiddle：http://jsfiddle.net/U3sEL/7/

将中心菜单与其内容对齐

1 个答案: