如何居中下拉菜单下的父选项卡？

问题描述

我有以下CSS / HTML设置

I have the following CSS/HTML setup http://jsfiddle.net/UDAUY/

如何将下拉菜单字段对齐到父标签下的自身中心，如下所示

How do I align the drop down menu field to center itself under the parent tab like this

| MENU 1 | MENU 2 | MENU 3 | MENU 4 |
-------------------------------------
    | Field 1 | Field 2 |
    ---------------------

$ b b

而不是这样，

instead of this,

| MENU 1 | MENU 2 | MENU 3 | MENU 4 |
-------------------------------------
         | Field 1 | Field 2 |
         ---------------------

$ b b

这是它现在的样子。还有，我可以设置子菜单的宽度ul容器动态调整吗？现在，我将它设置为一个任意高的值，它适用于所有实际目的，但想知道这是否可能。

which is how it looks right now. Also, can I set the width of the submenu ul container to adjust dynamically? Right now, I've set it to an arbitrarily high value, which works for all practical purpose, but would like to know if this is possible.

编辑

我添加了一个赏金，希望能吸引更好的答案。我正在寻找一个CSS的方法（没有JS），和相对单位，不是绝对的。此外，字段的数量不应该重要（你不必担心极长的/包装问题..但是，从2改为4不应该改变中心）。

I've added a bounty in the hopes of attracting better answers. I'm looking for a CSS only approach (no JS), and with relative units, not absolute. Also, the number of fields shouldn't matter (You don't have to worry about extremely long/wrapping issues.. However, changing from 2 to 4 shouldn't alter the centering).

推荐答案

这里是一个纯粹的CSS中心，几乎完成。

Here's a pure css centering that's "almost" done.

This is probably the best you can do with css.http://jsfiddle.net/gNanu/4/

它有时并不完美，我没有做过任何跨浏览器测试。

It doesn't center perfectly sometimes, and i haven't done any cross browser testing.

这篇关于如何居中下拉菜单下的父选项卡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！