0

I have the following code. It's essentially a simple grid view that uses <ul> and <li> tags. I wanted to make it responsive such that the <li> elements are always centered no matter what the width of the screen is. How can I do so? I've tried setting the padding-left and padding-right as percentages, however it doesn't work. Right now if I adjust the width of the screen it doesn't always stay centered.

4

4 回答 4

4

只需添加text-align: center到父级<ul>

小提琴

于 2013-09-16T06:52:54.250 回答
0

这取决于您所说的居中是什么意思。为了使整个列表居中，您可以执行以下操作：

ul {
    padding: 0px;
    width:500px;
    margin:auto;
}

看到这个 jsFiddle。

于 2013-09-16T07:00:07.603 回答
0

添加这个类：

ul.search-results{
    width:100%;
}

并更新这个类：

ul.search-results li {
border-right: 1px solid #cecdcb;
border-bottom: 1px solid #cecdcb;
border-top: 1px solid #fff;
list-style: none;
padding: 0;
display: inline-block;
vertical-align: top;
    width:60%;
    margin:0 20%;
    text-align:center;
}
于 2013-09-16T07:00:37.610 回答
0

我将扩展上一个答案...

也将 UL 居中

#home-listing {
  text-align: center;
    width:80%; /*Pick Your Own Width*/
    margin:16px auto;
}

http://jsfiddle.net/Zd9Gf/3/

于 2013-09-16T06:57:53.910 回答