将中心菜单与其内容对齐
将中心菜单与其内容对齐
提问于 2013-11-27 03:52:39
我试着用方框大小在菜单的div中水平居中显示文本。
如下所示：
Link to see the image
我的问题是，当我试图放置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创建它。
回答 1
Stack Overflow用户
发布于 2013-11-27 03:59:58
我注意到你说你正在考虑使用ul/li元素而不是表，我认为这是一个好主意，特别是对于导航类型的结构。从语义上讲，这就是导航菜单，一个链接列表。
下面是一些代码，其中包含居中的菜单/子菜单文本，还保留了隐藏的子菜单项的宽度。它不是很漂亮，你必须调整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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20226628
复制相关文章
相似问题
腾讯云开发者
