CSS：对齐浮动 li 在 div 内居中？答案

【问题标题】：CSS: Aligning floated li's centered inside div?CSS：对齐浮动 li 在 div 内居中？
【发布时间】：2023-03-10 07:20:01
【问题描述】：

HTML

<div class="wrapper join-links">
    <ul>
       <li><a href="link">Whatever</a></li>
       <li><a href="link">Something</a></li>
    </ul>
</div>

CSS

.join-links li {
    float:left;
    margin-right:20px;
}

是否有可能在环绕的包装 div 内将两个链接“居中”或“对齐”对齐？

edit：我也想知道我是否可以将它们对齐？

【问题讨论】：

【解决方案1】：

把float: left改成display: inline给你：

.join-links li {
    display: inline;
    margin-right:20px;
}

然后您可以在父 div 上使用 text-align。

【讨论】：

另外，如果您希望菜单元素具有固定宽度，您希望为每个 li 元素添加一个子元素并为它们设置宽度 - 因为 display:inline 拒绝为您的元素设置尺寸.或者您可以使用 display:inline-block 但据我所知，这在旧浏览器中很糟糕... =)

【解决方案2】：

要将链接向右或居中对齐，您需要使用文本对齐并将内联或内联块显示到 li 元素。 Float 属性将任何元素转换为块。 http://jsfiddle.net/CRrmL/15/ http://jsfiddle.net/CRrmL/16/

【讨论】：

【解决方案3】：

您可以通过用于居中的通用边距黑客来做到这一点：

.join-links ul{
    margin:0 auto;
}

那你需要设置li元素成行显示：

.join-links li {
    display:inline;
}

【讨论】：

【解决方案4】：

您可以像这样使链接对齐。只需为li 定义一个类，然后将第一个li 浮动到左侧，然后将第二个li 浮动到右侧。

【讨论】：