Question

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

我找到了一些信息，让我相信可能有办法用javascript来做。

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

如果有更好的方法可以实现这一目标，我愿意接受各种想法。

提前致谢比约恩

以下是我目前的样本。

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

我尝试过使用'display：inline-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％。浮动元素或绝对定位它们使它们失去了这个完整的特征。如果是这种情况，除非您设置宽度和/或溢出属性，否则元素将换行到允许显示内容的最小舒适大小。

如果设置宽度，并且内容大于声明的宽度，则会溢出或溢出。你有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（我从中学到了这些）。

Answer 2

如果您尝试将#menu置于.top_navigation_bar内，那么您可以使用margin:0 auto并另外使用这样的jQuery

$(function(){
    $menu = $('#menu');

    $menu.width(
        $('.menu').outerWidth() +
        $menu.outerWidth() - $menu.width()
    );
    // added the following line, because the lavalamp plugin
    // corrects itself when the window resizes..
    // so we trigger a resize event, and the plugin fixes everything ;)
    $(window).trigger('resize');
});

这会根据其内容调整#menu的大小，并且会因为我们在css中设置的自动边距而居中。

示例http://www.jsfiddle.net/MCnbr/

尝试将动态宽度jquery菜单居中

2 个答案: