Question

这似乎是一个相当简单的问题，当然有足够多的人在网站上询问类似的问题，但在阅读了十几个并尝试了很多事情之后，我仍然陷入困境。为什么呢？

我正在尝试简单地将导航列表集中在我的Django网站上。这是我的标记：

  {% if concerts.has_other_pages %}
  <div class="center">
    <ul class="paginator">
      {% if concerts.has_previous %}
        <li><a href="?page={{ concerts.previous_page_number }}">&laquo;</a></li>
      {% else %}
        <li class="disabled"><span>&laquo;</span></li>
      {% endif %}
      {% for i in concerts.paginator.page_range %}
        {% if concerts.number == i %}
        <li class="active"><span>{{ i }}</span></li>
        {% else %}
          <li><a href="?page={{ i }}">{{ i }}</a></li>
        {% endif %}
      {% endfor %}
      {% if concerts.has_next %}
        <li><a href="?page={{ concerts.next_page_number }}">&raquo;</a></li>
      {% else %}
        <li class="disabled"><span>&raquo;</span></li>
      {% endif %}
    </ul>
  </div>
  {% endif %}

这是我的CSS：

.center{
  text-align: center;
}

.center .paginator{
  width: 100%;
  margin: 1em 0;
  padding: 0;
  list-style-type: none;
}

.paginator li{
  display: inline-block;
  float: left;
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 1.3em;
  text-align: center;
}

.paginator li a{
  padding: 8px 16px;
  border-radius: 5px;
}

.paginator li.active{
  background-color: #444;
}

.paginator li a:hover{
  background-color: #111;
  border-radius: 5px;
  transition: background-color .5s;
}

除了无论我做什么外，所有这些风格都适用，按钮只是拥抱屏幕的左侧而不会居中。有任何想法吗？我花了很多时间试图解决这个非常简单的问题。

Answer 1

您不能同时显示float和inline-block：

.paginator li{
  display: inline-block;
  /* float: left; /* This forces you to put it to left align */
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 1.3em;
  text-align: center;
}

删除上述规则，它应该可以正常工作。

CSS不会在父div中居中列表

1 个答案: