列表项的水平对齐/对齐？

Posted 2023-04-13

【中文标题】列表项的水平对齐/对齐？

【英文标题】：Horizontal justification/alignment of list items?

【发布时间】：2011-09-28 23:41:03

【问题描述】：

我有以下情况：

<nav id="access" role="navigation">
    <div class="menu">
        <ul>
            <li class="page_item"><a href="#pricing" title="Pricing">Pricing</a></li>
            <li class="page_item"><a href="#booking" title="Booking">Booking</a></li>
            <li class="page_item"><a href="#contact" title="Contact">Contact</a></li>
            <li class="page_item"><a href="#map" title="Map">Map</a></li>
        </ul>
    </div>
</nav>

由于导航所在的外部容器大约是 800 像素宽，因此导航容器也是 800 像素宽。

#access .menu ul li 
    float: left;

我将所有菜单元素向左浮动，以便并排对齐。我想知道如何在所有这些列表项之间创建相等的空间，如下所示：

____________________________________ <- this is what I have now
item  item  item  item  item

____________________________________ <- this is what I want
item    item    item    item    item

知道如何解决这个问题吗？使用纯 CSS 还是 jQuery？

【问题讨论】：

会将其添加到 css：#access .menu ul width: 100%; 做什么？或者实际上，.menu ul li width: 100%; 就此而言

【参考方案1】：

此方法 100% 有效！

CSS：

.menu  position:relative; text-align:justify; text-align-last:justify; border:1px solid silver; height:2.2em; min-width:800px; 
.menu li  display:inline-block; background:silver; padding:.5em 1em; cursor:pointer; text-align:center; 
.menu li:hover  background:black; color:white; 
.menu:after  content:""; display:inline-block; width:100%; height:0; overflow:hidden; 

HTML：

<ul class="menu">
    <li>About</li>
    <li>Company</li>
    <li>Products</li>
    <li>Menu item</li>
</ul>

【讨论】：

这是跨浏览器吗？

【参考方案2】：

如果您希望它与任意数量的“li”一起使用，则此答案适用：

如果你给你 li 的 display:block;

li float:left; display:block; 

那么以下脚本会为您完成这项工作：

var first = $("li:first");
var allOther = $("li").not(":first, :last");
var last = $("li:last");

var remainingWidth = $(".menu").width() - first.width() - last.width();
allOther.width(remainingWidth / allOther.length).css("text-align", "center"); 

在 jsFiddler 中查看：http://jsfiddle.net/PLQFj/14/

【参考方案3】：

.menu 
    text-align: justify;

.menu ul,
.menu li 
    display: inline;

.menu ul::after 
    display: inline-block;
    width: 100%;
    content: "";
    

但为了跨浏览器兼容性 (IE7)，您应该将 ::after 替换为标记中的附加元素：

<nav id="access" role="navigation">
    <div class="menu">
        <ul>
            <li class="page_item"><a href="#pricing" title="Pricing">Pricing</a></li>
            <li class="page_item"><a href="#booking" title="Booking">Booking</a></li>
            <li class="page_item"><a href="#contact" title="Contact">Contact</a></li>
            <li class="page_item"><a href="#map" title="Map">Map</a></li>
        </ul>
        <span></span>
    </div>
</nav>

见demo fiddle。

【参考方案4】：

FIDDLE：http://jsfiddle.net/QR5s3/

*CSS（从浮动 li 更改为内联 li）*

#access .menu ul 
    text-align:center;   


#access .menu ul li:first-child 
    padding-left:0 !important;


#access .menu ul li:last-child 
    padding-right:0 !important;


#access .menu ul li 
    display:inline;
    padding:0 35px; /* ADJUST PADDING */

【讨论】：

这仅适用于您恰好有四个项目，并且硬编码 35px 用于填充也不是一个好主意，因为任何小的更改都会破坏外观。此外 :first-child 并非所有浏览器都支持。我在下面提出了一个 jquery 解决方案来解决这些问题。

【参考方案5】：

怎么样：

#access .menu ul li 
     
   float: left; 
   margin-right: 10px
 

【讨论】：

margin-right 不是更好的选择吗？否则最左边的项目将被错误定位。

【参考方案6】：

恐怕唯一合理的跨浏览器非 javascript 方法是<table>。这不是很优雅，但它可以完成工作。基于浮动的布局将无法正确显示可变大小的项目。整个事情甚至应该在 IE 6 中工作。

标记

<table class="nav">
    <tr>
        <td class="item">item</td>
        <td class="separator">&nbsp;</td>
        <td class="item">item</td>
        <td class="separator">&nbsp;</td>
        ...
    </tr>
</table>

分隔符需要包含一个 -entity 以确保它在所有浏览器中正确显示（IE 在此处通过忽略空单元格来制造麻烦）。

风格

.nav, .nav tbody, .nav tr 
    width: 100%;

.nav .item 
    /* this forces the item to be as small as possible,
       which forces the separators to take up the
       remaining space */
    width: 1px; 

您需要确保所有项目的内容都将空格替换为 ，以防止由于1px 宽度而导致的文本换行。

【参考方案7】：

我能想到的第一种方法是使用表格而不是无序列表。默认情况下，它会看起来像你想要的那样。此外，由于对齐是自动的，因此添加更多菜单项将变得轻而易举。

Here's a demonstration of a couple of ways to do this

【参考方案8】：

CSS：

#access

    border: 1px solid #DDDDDD;
    height: 50px;
    width: 800px;


.menu ul li

    float: left;


.menu ul 
    margin: 0;
    padding: 0

JQUERY：

var li = $('#access ul li').length - 1;
var w = 0;
$('#access ul li').each(function() 
    w = w + $(this).width();
);
var eachPlot = ($('#access').width() - w) / li;
$('#access ul li:gt(0)').each(function() 
    $(this).css(
        'margin-left': parseInt(eachPlot) + 'px'
    );
);