在UL中使用Aligned LI的CSS

Answer 1

如果您希望每个人平均共享屏幕空间，可以执行以下操作：

<style>
    .split { width: 33%; float: left; }
</style>

<ul>
    <li class="split">left</li>
    <li class="split">center</li>
    <li class="split">right</li>
</ul>

但是，您可能希望将样式移动到外部样式表中。

Answer 2

你绝对可以做到这一点，只有一件事是浮动的。

ul li { float:right; }

如果你将它们全部浮动到左边，那么你将得到（有三个LI元素）右边，中间和左边。

<ul><li>right</li><li>center</li><li>left</li></ul>

想到这一点的一个好方法是考虑每个LI元素你想要发生什么：你希望每个元素都移动到另一个元素的右边。这是使用列表结构进行水平导航的最常用方法。

Answer 3

您的li元素只会与它包含的文本一样宽，因为您将它们浮动并且未指定宽度。你想让你的中心元素流畅吗？如果我没有错，那听起来你要采用流畅的三柱布局？如果这就是你想要的东西，网上有很多这样的例子。

Answer 4

感谢mitch和其他所有人，这是我提出并为我工作的解决方案。

<style>  
ul {
    margin: 1em 0;
    padding: 0;
    list-style-type:none;
}

li.three {
    width: 33%; 
}

li.two {
    width: 50%; 
}

li.one {
    width: 100%;    
}

li.left {
    float: left;
    text-align: left;   
}

li.center {
    width: 33%;
    float: left;
    text-align: center;
}

li.right {
    width: 33%;
    float: right;
    text-align: right;
}


</style>

---

<ul> 
    <li class="three left">left</li> 
    <li class="three center">center</li> 
    <li class="three right">right</li> 
</ul> 


<ul> 
    <li class="two left">left</li> 
    <li class="two right">right</li> 
</ul> 

<ul> 
    <li class="one left">left</li> 
</ul>