html - CSS 自动改变 ul 宽度；适合 child inline-block li 的最小宽度？

Question

我有一个页面，页面按钮生成为无序列表。它们的样式使页面按钮显示为水平行。因为我的 ul 是这样设计的，所以我很难弄清楚如何将它居中。正在将其宽度设置为它所在的 div 的 100%。按钮(每个按钮都在一个 li 中)与 ul 的左侧对齐。我需要按钮在 div 的中间居中。但是，因为 ul 是 100% 宽度，所以我无法将 ul 居中(从某种意义上说，它已经居中)。我不确定如何让 li 在 ul 内居中；将 li 的位置设置为 absolute 是行不通的，因为这样它们都会被放在同一个位置，彼此重叠。

如果我可以将 ul 的宽度设置为其内容的宽度，然后将 ul 在页面上居中，那会很好，但我不能将 ul 设置为恒定宽度，因为宽度会根据方式而变化有很多页面；一些搜索结果为 40 页，而其他搜索结果只有 1 页。我真正需要的是让 ul 自动适应页面按钮的宽度，但我不知道该怎么做。

Here's a fiddle I made to reproduce the issue.

代码:

<div class="SearchResults">

<div class="Event">
    <div class="">
         <h3>
         <a href="/faculty-and-research/faculty-directory/detail/?id=41432">
         This is an example of a search result that is loaded on the page. This is the full width of the content box; the page buttons should be centered under this box
         </a>
         </h3>
         <span> </span>
    </div>

</div>  

<div class="searchpagination">
    <ul>

        <li><a href="/WebAssets/Templates/EventSearchResults.aspx?page=8&q=&filters=&after=10%2f06%2f2014&before=10%2f31%2f2014" class="pageNavigator"><i class='fa fa-caret-left'></i></a></li>

        <li><a href="/WebAssets/Templates/EventSearchResults.aspx?page=1&q=&filters=&after=10%2f06%2f2014&before=10%2f31%2f2014" class="">1</a></li>

        <li><a href="/WebAssets/Templates/EventSearchResults.aspx?page=2&q=&filters=&after=10%2f06%2f2014&before=10%2f31%2f2014" class="">2</a></li>

        <li><a href="/WebAssets/Templates/EventSearchResults.aspx?page=3&q=&filters=&after=10%2f06%2f2014&before=10%2f31%2f2014" class="active">3</a></li>

        <li><a href="/WebAssets/Templates/EventSearchResults.aspx?page=...&q=&filters=&after=10%2f06%2f2014&before=10%2f31%2f2014" class="dots">...</a></li>

        <li><a href="/WebAssets/Templates/EventSearchResults.aspx?page=40&q=&filters=&after=10%2f06%2f2014&before=10%2f31%2f2014" class="">40</a></li>

        <li><a href="/WebAssets/Templates/EventSearchResults.aspx?page=10&q=&filters=&after=10%2f06%2f2014&before=10%2f31%2f2014" class="pageNavigator"><i class='fa fa-caret-right'></i></a></li>

    </ul>
</div>
</div>

编辑:我为 div 添加了红色边框，为 ul 添加了蓝色边框。你可以看到 ul 占据了 div 的整个宽度，所以居中 ul 本身并没有做任何事情，因为它已经居中了......需要居中的是 ul 内部的框

Answer 1

添加到ul display:inline-block，并设置为.searchpagination text-align:center;