Question

我正在构建一个页脚，但是我无法获得包含指向各种页面的链接的4个div。在Dreamweaver上它的行为是正确的，但是一旦我上传它或在JSFIDDLE上测试它就分散了。

理想情况下，我希望它看起来像这样，每个div都集中在＆＃39;在页脚中：

        Random information above the divs below (displayed center of footer)

                 Product      Company      Etc....        Contact

                 link         link

                 link         link

等等。

我在这里有一个演示，其中包含完整的代码：http://jsfiddle.net/NkFe9/3/

以下是一些CSS：

/*global footer settings*/
#footer {
color: #C9C9C9;
min-width: 1500px;
background-color: #2d2d2d;
list-style: none;
height: 450px;

background-image:url(../img/index/footer/pixelpatterns.png);
background-repeat:repeat;

}


#insidefooter {
margin-top: 20px;
text-align: center;
}

/*settings for social media buttons*/
#insidefootertermsplusbuttons li {
display: inline;
color: #C9C9C9;

}

 #insidefooterone h5, #insidefootertwo h5, #insidefooterthree h5, #insidefooterfour h5 {
text-align:left;
margin-bottom: 0;
color:#FFFFFF;
}

 #insidefooterone ul, #insidefootertwo ul, #insidefooterthree ul, #insidefooterfour ul{
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9;
}

#insidefooterone li, #insidefootertwo li, #insidefooterthree li, #insidefooterfour li {
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9;
}

#disclaimer {

margin-top: 20px;
font-size: 9px;
text-align: center;
margin-bottom: 0;
}

#disclaimer p {
text-align:center;
color: #C9C9C9;
}

谢谢

Answer 1

尝试将padding:0添加到ul

#insidefooterone ul, #insidefootertwo ul, #insidefooterthree ul, #insidefooterfour ul{
    list-style: none;
    text-align: left;
    margin-left: 0;
    color: #C9C9C9;
    padding:0
    }

<强> DEMO

并且不要根据Dreamweaver设计视图来判断输出。总是喜欢在浏览器中登记。

您需要使用margin:0 auto使div中心对齐。 margin:0 auto与float:left不会有任何区别。所以你需要从父div中消除float：left。

尝试在ul链接中添加父div，以便很容易对齐它。的 Updated Demo

如何集中包含UL的儿童DIVS？

1 个答案: