Question

首先 - 在我的网站link，您可以看到主导航更加左侧对齐的问题。我希望将元素置于标题的空白区域中。

这是正在使用的代码。

HTML

 <div id="HeaderLower">
                <div class="Block" >
                    <div class="Block Panel BlockContent" id="Menu">
                        <ul>
                            <li class="First %%GLOBAL_ActivePageHomeClass%%"><a href="%%GLOBAL_ShopPathNormal%%/"><span>%%LNG_MainPage%%</span></a></li>

                        </ul>
                    </div>

</div>
                %%Panel.SideCategoryList%%
                %%Panel.PagesMenu%%
                <div class="clear"></div>
            </div>
        </div>

CSS

#HeaderLower .Block {
float: left;
margin: 0 !important;
}


#HeaderLower ul{

list-style-type: none;
float: none !important;
width: auto !important;
padding: 0;
margin: 0;
margin: 0;
padding: 0;
}

#HeaderLower li {


float: left !important;
width: auto !important;
position: relative;
list-style: none;
margin: -3px 0 0 0;
padding: 0 40px 0 0;
}


#HeaderLower {
clear: both;
margin: 0 auto;
width: 980px;
min-height: 50px;
position: relative;
z-index: 2;
}

我使用Bigcommerce，他们的代码文件是一个大杂烩，所以我为长度道歉。感谢您提供的任何帮助！

Answer 1

我认为你可以做一件事

#HeaderLower li {


float: left !important;
width: auto !important;
position: relative;
list-style: none;
margin: -3px 0 0 0;
padding: 0 20px;
}

试试这个会对你有用如果不告诉我我会更新代码

你可以在Jquery下面使用的另一种方法我将动态处理你的左右填充

您可以根据您的代码更新未更新的代码，应用＆＃34;水平对齐＆＃34; UL上课

$('.horizontally-align').each(function () {
    var ul = $(this);
    var ulWidth = ul.width();

    var links = ul.find('> li > a');
    var texts = links.find('> span.text');

    var numOfLinks = links.length;
    // set the width of all A tags to the width of the UL divided by the number of A tags
    // using Math.floor to round down to the nearest whole number
    var linkBaseWidth = Math.floor(ulWidth / numOfLinks);
    links.each(function () {
        var a = $(this);
        var li = a.parent();
        var text = a.find('span.text');
        //var borderWidth = a.find('span.border').width();

        a.outerWidth(linkBaseWidth);

        if (li.hasClass('first') || li.hasClass('last')) {
            var textWidth = a.outerWidth();

            //extra calculations for first and last elements of the UL because of sidecap use to support defunct browsers.
            if (li.hasClass('first')) {
               a.width(linkBaseWidth);

                a.css('padding-right', padding);

            } else { // must be class 'last'

            }
        }
        a.css('width', linkBaseWidth);
    });

    // the difference between the width of the UL and the combined width of all A tags
    var widthDifference = ulWidth - (Math.floor(ulWidth / numOfLinks) * numOfLinks);

});

Answer 2

只需更改

#HeaderLower .Block {
  float: left;margin: 0 !important;
}

到这个

#HeaderLower .Block {
  margin: 0 auto;width: 885px;
}

Answer 3

首先，你在这里有很多奇怪/不必要的css代码。您可以使用DOM检查器禁用其中大部分，并且渲染完全不会更改。我在http://jsfiddle.net/t24J6/处将您发布的代码简化了一些（并添加了可视化的颜色），如果我理解您的问题，您希望内联菜单元素居中。

这样做的一种方法是简单地在包含元素上设置text-align: center;，其余的应该没问题 - 这是从您发布的代码派生的示例：

#HeaderLower {
    background-color: gray;
    margin: 0 auto;
    width: 980px;
    min-height: 50px;
}
#HeaderLower ul{
    text-align: center; /* center the menu items */
    list-style: none;
    padding: 0;
    margin: 0;
}
#HeaderLower li {
    display: inline-block;
    margin: 0;
}
#HeaderLower li a {
    display: inline-block;
    padding: 0 20px;
    background-color: blue;
    color: white;
}

http://jsfiddle.net/t24J6/1/

居中文本/ div用于菜单导航

3 个答案: