Question

我无法使用CSS将列表作为中心页面。我尝试了一些不同的东西，比如使用外部div等，但只是不能让列表移动到页面的中心。

这是我的非中心HTML和CSS：

＆＃13;

.filter {
  padding-bottom: 40px;
}
.filter li {
  float: left;
  padding-right: 10px;
  border-right: 1px solid #ddd;
  margin-right: 10px;
  font-size: 12px;
  line-height: 12px;
  list-style: none;
}
.filter li a {
  color: #888;
}
.filter li:last-child {
  border: 0px;
}
.filter li.current a {
  color: #d16f4e;
}

＆＃13;

<ul class="filter">
  <li class="current">
    <a href="#" title="all">All</a>
  </li>
  <li>
    <a href="#" title="cat1">Cat1</a>
  </li>
  <li>
    <a href="#" title="cat2">Cat2</a>
  </li>
  <li>
    <a href="#" title="cat3">Cat3</a>
  </li>
</ul>

＆＃13;

Answer 1

浮动和居中相互矛盾。

只需改为制作LI display:inline-block，然后在父级上使用text-align将其居中。

＆＃13;

.filter {
  padding-bottom: 40px;
  text-align:center;
}
.filter li {
  display:inline-block;
  padding-right: 10px;
  border-right: 1px solid #ddd;
  margin-right: 10px;
  font-size: 12px;
  line-height: 12px;
  list-style: none;
}
.filter li a {
  color: #888;
}
.filter li:last-child {
  border: 0px;
}
.filter li.current a {
  color: #d16f4e;
}

＆＃13;

<ul class="filter">
  <li class="current">
    <a href="#" title="all">All</a>
  </li>
  <li>
    <a href="#" title="cat1">Cat1</a>
  </li>
  <li>
    <a href="#" title="cat2">Cat2</a>
  </li>
  <li>
    <a href="#" title="cat3">Cat3</a>
  </li>
</ul>

＆＃13;

Answer 2

您只需要将列表视为内联元素，使其宽度不会宽于其内容，然后您可以将其置于us父元素中：

＆＃13;

.filter {
  padding-bottom: 40px;
  text-align:center;
}

.filter li {
  display:inline;
  border-right: 1px solid #ddd;
  font-size: 12px;
  padding-right: 10px;
  margin-right: 10px;
  list-style: none;
}

.filter li a {
  color: #888;
}

.filter li:last-child {
  border: 0px;
}

.filter li.current a {
  color: #d16f4e;
}

＆＃13;

<div id="main">

  <ul class="filter">
    <li class="current">
      <a href="#" title="all">All</a>
    </li>
    <li>
      <a href="#" title="cat1">Cat1</a>
    </li>
    <li>
      <a href="#" title="cat2">Cat2</a>
    </li>
    <li>
      <a href="#" title="cat3">Cat3</a>
    </li>
  </ul>
  
</div>

＆＃13;

Answer 3

您可以使用text-align：center属性将列表包装在div中以使其居中，并将<ul>的display属性设置为内联块：

.filter {
  padding-bottom: 40px;
  display:inline-block;
  padding-left:0;
}
.filter li {
  float: left;
  padding-right: 10px;
  border-right: 1px solid #ddd;
  margin-right: 10px;
  font-size: 12px;
  line-height: 12px;
  list-style: none;
}
.filter li a {
  color: #888;
}
.filter li:last-child {
  border: 0px;
}
.filter li.current a {
  color: #d16f4e;
}
div {
  text-align: center;
}

<div>
  <ul class="filter">
    <li class="current">
      <a href="#" title="all">All</a>
    </li>
    <li>
      <a href="#" title="cat1">Cat1</a>
    </li>
    <li>
      <a href="#" title="cat2">Cat2</a>
    </li>
    <li>
      <a href="#" title="cat3">Cat3</a>
    </li>
  </ul>
</div>

Answer 4

请试试这个：

HTML：

 <div class="list_container">
 <ul class="filter">
      <li class="current">
        <a href="#" title="all">All</a>
      </li>
      <li>
        <a href="#" title="cat1">Cat1</a>
      </li>
      <li>
        <a href="#" title="cat2">Cat2</a>
      </li>
      <li>
        <a href="#" title="cat3">Cat3</a>
      </li>
    </ul>
    </div>

CSS：

.list_container{
    margin: 0 auto;
    text-align: center;
    width: 960px;
}

.filter {
  padding-bottom: 40px;
  text-align:center;
}
.filter li {
  display:inline;
  padding-right: 10px;
  border-right: 1px solid #ddd;
  margin-right: 10px;
  font-size: 12px;
  line-height: 12px;
  list-style: none;
}
.filter li a {
  color: #888;
}
.filter li:last-child {
  border: 0px;
}
.filter li.current a {
  color: #d16f4e;
}

将列表放入页面中心

4 个答案: