CSS自动更改ul宽度;适合儿童内联块li的MINIMUM宽度？

Question

我有一个页面按钮，它是作为无序列表生成的。它们的样式使页面按钮显示为水平行。因为我的ul风格是这样的，所以我很难弄清楚如何使它居中。它的宽度设置为它所在的div的100％。按钮（每个在li中）与ul的左侧对齐。我需要按钮在div的中间居中。但是，因为ul是100％宽度，所以我不能将ul居中（从某种意义上说，它已经居中）。我不确定如何让李在ul中居中;将li的位置设置为绝对不起作用，因为它们全部放在同一个地方，相互重叠。

如果我可以将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;

Answer 2

将ul设置为内联元素，然后在容器上使用text-align: center;。这适用于不同的宽度。这是updated fiddle

.searchpagination {
    text-align: center;
}

.searchpagination ul {
    display: inline-block;
    padding-left: 0; /* remove initial padding to perfectly center */
}

Answer 3

你需要在你的＆＃34; searchpagination＆＃34;

中添加这样的css

margin: 20px auto;
position: relative;
width: 300px;

保证金20px auto将以此为中心。但是这只有在输入该元素的宽度时才有效。

试试吧。