css - 试图居中动态宽度 jquery 菜单

Question

我有一个用来自 apycom.com 的 jquery 构建的菜单，我正试图将其居中。菜单项来自 cms，并在页面加载时动态创建。所以这意味着菜单不是固定宽度。我尝试了几种仅使用 css 的方法，但没有为菜单设置宽度，它们就无法工作。

我发现一些信息让我相信可能有一种方法可以用 javascript 来完成。

有没有办法动态设置菜单周围div元素的宽度，然后将左右边距设置为auto，使菜单居中？

如果有更好的方法来实现这一点，我愿意接受。

提前致谢比约恩

这是我目前所拥有的示例。

我已经尝试过使用“margin: 0 auto;”但没有不起作用的宽度设置。因为菜单是通过循环 cms 提供的菜单项创建的，所以我不知道菜单的宽度。

我试过使用“display: inline-block;”同样，这让我明白菜单占用的 block 空间只是菜单的宽度。现在我只需要能够将那个 block 居中。我认为可能有一种方法，一旦创建了菜单并且知道了宽度，您就可以应用边距设置。

可能类似于 jquery 能够即时应用和更改样式设置的方式。

<div class="top_navigation_bar">
<div id="menu">
    <ul class="menu">
        <li><a class="parent" href="/en/"><span>Home</span></a></li>
        <li><a class="parent" href="/en/web-design"><span>Web Design</span></a>
        <div>
            <ul>
                <li><a href="/en/design-packages"><span>Design Packages</span></a></li>
                <li><a href="/en/website-maintenance"><span>Website Maintenance</span></a></li>
                <li><a href="/en/redesign-website"><span>Redesign Website</span></a></li>
                <li><a href="/en/design-fundamentals"><span>Design Fundamentals</span></a></li>
                <li><a href="/en/design-elements"><span>Design Key Elements</span></a></li>
            </ul>
        </div>
        </li>
        <li><a class="parent" href="/en/website-business-solutions"><span>Business Solutions</span></a></li>
        <li><a class="parent" href="/en/internet-marketing"><span>Internet Marketing</span></a>
        <div>
            <ul>
                <li><a href="/en/small-business-marketing"><span>Small Business Marketing</span></a></li>
                <li><a href="/en/leveraging-the-internet"><span>Leveraging the Internet</span></a></li>

            </ul>
        </div>
        </li>
        <li><a class="parent" href="/en/doing-business"><span>About Us</span></a>
        <div>
            <ul>
                <li><a href="/en/about"><span>Design Team</span></a></li>
            </ul>
        </div>
        </li>
        <li><a class="parent" href="/en/blog"><span>Blog</span></a></li>
        <li><a class="parent" href="/en/contact-us"><span>Contact</span></a></li>
        <li class="last"><a href="/en/faq"><span>FAQ</span></a></li>
    </ul>
</div>

.top_navigation_bar {
    height: 46px;
    padding-top: 4px;
    background-color: #3a8658;
}

div#menu {
    height: 46px;
    padding-left: 24px;
    background: url(/site_media/template_images/images/left.png) no-repeat;
    _background: url(/site_media/template_images/images/left.gif) no-repeat;
    width:auto;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}

Answer 1

如果没有样本，就很难看清到底发生了什么。如果您发布您正在使用的 HTML 和 CSS 的示例，那就太好了。但是会失明...

要使用 CSS 使元素水平居中，您可以这样做:

element {margin: 0px auto;}

这足以使元素正确居中。

请注意 block elements (如 div、ul、li 和 p)倾向于水平填充 100%。 float 元素或绝对定位它们会使它们失去这种填充特性。如果是这种情况，除非您设置宽度和/或溢出属性，否则元素将换行到允许显示内容的最小舒适尺寸。

如果你设置了宽度，而内容大于声明的宽度，它会或溢出，或换行。您也可以使用 CSS 属性来处理这些情况。

我建议使用 CSS 来完成此操作，因为这样布局更易于访问。但如果您愿意，您可以使用 javascript 或 jquery 编写宽度代码，让您的生活更轻松一些。

要使用 javascript 处理它，您需要如下内容:

myMenuElement.style.width = "200px";

使用 Jquery(width method):

$('#myMenuElement').width(200);

干杯。

编辑

不确定所需的效果到底是什么，但我对您的 CSS 进行了一些更改。检查。

.top_navigation_bar {
    height: 46px;
    padding-top: 4px;
    background-color: #3a8658;
}

div#menu {
    height: 46px;
    padding-left: 24px;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.menu>li {
    display: inline;
    position: relative;
}

ul.menu>li>div {
    display: block;
    position: absolute;
    left: 0%;
}

ul.menu span {
    white-space: nowrap;
}

关注a good reference from both, vertical and horizontal menus (我从中学到了)。