CSS 自动改变 ul 宽度；适合儿童 inline-block li 的最小宽度？答案

【问题标题】：CSS auto change ul width; fit to MINIMUM width of children inline-block li's?CSS 自动改变 ul 宽度；适合儿童 inline-block li 的最小宽度？
【发布时间】：2014-12-09 08:44:58
【问题描述】：

我有一个带有页面按钮的页面，这些页面按钮生成为无序列表。它们的样式使页面按钮显示为水平行。因为我的 ul 是这样设计的，所以我很难弄清楚如何居中。将其宽度设置为它所在的 div 的 100%。按钮（每个都在一个 li 中）与 ul 的左侧对齐。我需要将按钮居中在 div 的中间。但是，因为 ul 是 100% 宽度，所以我无法将 ul 居中（从某种意义上说，它已经居中了）。我不确定如何让 li 在 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里面的框

【问题讨论】：

标签： html pagination html-lists css

【解决方案1】：

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

.searchpagination {
    text-align: center;
}

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您需要在“搜索分页”中添加一些这样的 css

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

Margin 20px 自动将其居中。但这只有在您输入该元素的宽度时才有效。

试试吧。

【讨论】：