UL 中带有对齐 LI 的 CSS答案

【问题标题】：CSS with Aligned LI within a ULUL 中带有对齐 LI 的 CSS
【发布时间】：2011-01-15 06:16:57
【问题描述】：

我试图让 UL 中的一些 LI 在页面内左对齐、右对齐和居中。对于我的生活，我无法弄清楚如何将某些东西“居中”与左右对齐的 LI 保持在同一条线上。

ul {
    margin:1em 0;
    padding:0
} 

ul li{
    display:inline-block;
    white-space:nowrap; 
    margin:5px
} 

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

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

ul li.right{
    float: right; 
    text-align:right; 
}

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

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

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

有人可以帮忙吗？顺便说一句，我试图避免使用 DIV。

谢谢！

【问题讨论】：

标签： html css

【解决方案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>

不过，您需要将样式移至外部样式表。

【讨论】：

我希望右对齐，左对齐，居中……你猜对了。甚至间距也很重要，但不是必需的，因为内容的“大小”可能因每列而异。
顺便说一句，我的样式确实在外部工作表中，我只是移到主页进行测试。
哦，我知道你想做什么。因此，您可能希望左侧有 3 个元素，中间有 2 个，右侧有 4 个。每边的数字可以改变，对吗？如果是这样，你为什么要远离 div？
看一下我稍后发布的代码。我想通了（我认为）：P 我希望能够删除任何“类型”的 UL（3/2/1 项），并且能够让它们适当地分开。

【解决方案2】：

你绝对可以只用浮动一件事来做到这一点。

ul li { float:right; }

如果将它们全部浮动到左侧，那么您将获得（带有三个 LI 元素）右、中和左。

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

考虑这一点的一个好方法是考虑您希望对每个单独的 LI 元素发生什么：您希望将每个元素移动到另一个元素的右侧。这是使用列表结构进行水平导航的最常用方法。

【讨论】：

【解决方案3】：

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

【讨论】：

好吧，我正在尝试做报告。可打印版本的每个“ul 组”会有一/二/三行，但在屏幕上，它将是一组 ul。我正在努力使东西间隔均匀。

【解决方案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>

【讨论】：