Question

我有一个列表，列表元素包含一些我想要拆分的文本：

|富..............酒吧|

其中|表示元素的边缘，和。表示空白。我的代码如下所示：

<li><span class="left">Foo</span><span class="right">Bar</span></li>

不幸的是，就我而言。我已经尝试将position: relative; right: 1px;和float: right;用于.right，但都没有效果。

编辑：text-align也没有。

编辑2：澄清：所以我需要一些文本与左边对齐，有些文本在右边。

Answer 1

CSS

这会使li全屏宽

li
{
    display: block;
    width: 100%;
}

向左浮动.left，向右浮动.right

.left
{
    float: left
}

.right
{
    float: right;
}

然后终于

li:after
{
    content: '';
    clear: both;
}

Answer 2

尝试：

HTML：

<li><span class="left">Foo</span><span class="right">Bar</span></li>

CSS：

.left{
    float:left;
}

.right{
    float:right;
}

li
{
    list-style-type:none;
    width: 50%;
}

您可以通过将width:50%设置为您想要的百分比来定义Foo和Bar之间的空间大小。