Question

我有一个列表，我需要在页脚中做出响应。

e.g：

<ul>
     <li>About</li>
     <li>Contact</li>
     <li>Company Information</li>
     <li>Contact Us / Help</li>
</ul>

我需要做的是在页脚中使用ul，以便项目在多行中居中。

所以它看起来像：

About    Contact    Company Information    Contact Us / Help

然后在移动设备上等：

                    About    Contact

        Company Information    Contact Us / Help

但是我想不出来。

CSS现在只是一个基本的水平列表... jsfiddle：https://jsfiddle.net/cgke4hvu/

如果你在那个小提琴上调整预览大小，希望你会看到我需要的东西。

感谢。

Answer 1

您必须删除float: left并使用此CSS：

body {
    width: 100%;
}

ul {
    list-style-type: none;
    border: 1px solid blue;   /* added just for clearer view */
    text-align: center; /* added */
}

ul li {
    display: inline;  /* added */
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

尝试fiddle

Answer 2

我认为this方式 - 最简单。只需将.clear类设置为您希望在新行中看到的每个li。

＆＃13;

body {
    width: 100%;
}

ul {
    list-style-type: none;
}

ul li {
    float: left;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

@media screen and (max-width: 600px) {
    .clear {
        clear: left;
    }   
}

＆＃13;

 <ul>
     <li>About</li>
     <li>Contact</li>
     <li class="clear">Company Information</li>
     <li>Contact Us / Help</li>
</ul>

＆＃13;

即使调整大小到一行或多行，也要保持ul li元素居中

2 个答案: