0

我无法在 div 中居中 ul。

HTML：

<div id="footer">   <span class="copy">Copyrights 2014</span>

    <ul class="hor_list" id="footer_menu">
        <li><a href="">HOME</a>

        </li>
        <li><a href="">SHOPS</a>

        </li>
        <li><a href="">CONTACT US</a>

        </li>
    </ul> <a href="" class="footer_link">www</a>

</div>

我需要footer_menu在中心。#footer在页面中居中，我需要 footer_menu 在页脚中居中。

CSS：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
#footer {
    text-transform: uppercase;
}
#footer {
    color: #373737;
    font-size: 10px;
    line-height: 24px;
    height: 24px;
    width: 1000px;
    margin: 0 auto;
}
.hor_list {
    display: inline-block;
}
.hor_list li {
    display: inline;
}
ol, ul {
    list-style: none;
}

这是工作 Jsfiddle：http: //jsfiddle.net/WXYx8/

我正在尝试这样的事情，但不工作：

#footer_menu {
    display: inline-block;
    width: 300px;
    margin: 0 auto;
}

编辑：

我不需要页脚中的“ span”和“ a.footer_link”居中（相反，它们应该非常左和非常右）。

4

4 回答 4

2

您需要设置text-align: center;为您的#footer

演示

然后你可以像这个演示一样使用左浮动和右浮动

.copy{
    float: left;
}
.footer_link{
    float: right;
}
于 2013-10-01T09:19:38.063 回答
1

添加text-align: center到footer.

#footer {
    color: #373737;
    font-size: 10px;
    height: 24px;
    line-height: 24px;
    margin: 0 auto;
    text-align: center;
    width: 1000px;
}

JS 小提琴：http: //jsfiddle.net/WXYx8/3/

于 2013-10-01T09:19:48.847 回答
0

试试这个：http: //jsfiddle.net/QVykC/

<div id="footer">   
<span class="copy">Copyrights 2014</span>
<a href="" class="footer_link">www</a>
<ul class="hor_list" id="footer_menu">
    <li><a href="">HOME</a>

    </li>
    <li><a href="">SHOPS</a>

    </li>
    <li><a href="">CONTACT US</a>

    </li>
</ul>

css

* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#footer {
text-transform: uppercase;
}
#footer {
color: #373737;
font-size: 10px;
line-height: 24px;
height: 24px;
width: 1000px;
margin: 0 auto;
}
.hor_list {
display: block;
margin-right: auto;
margin-left: auto;
}
.hor_list li {
display: inline;

}
ol, ul {
list-style: none;
}
#footer_menu {
width: 300px;
margin: 0 auto;
}

.copy {
float: left;
}

.footer_link {
float: right;
}
于 2013-10-01T09:26:25.623 回答
0

尝试display: block代替display: inline-block. 它似乎做了你在小提琴上描述的事情。

于 2013-10-01T09:20:54.607 回答