Question

如何在多行上左右对齐文本，例如：

┌─────────────────────────────────────┐
│ Tums                                 29 │
│ Oxydativedecarboxilization          ATP │
│ appdata      C:\Users\Ian\AppData\Local │
└─────────────────────────────────────┘

e.g：

注意：在

之前询问了此问题的单行变体

以下是我在SO和其他地方发现的一些尝试的示例，以及尝试左右对齐的情况：

<!DOCTYPE html>
<HTML>
<HEAD>
<HEAD>
    <TITLE>Home Page</TITLE>
    <STYLE type="text/css">
        .left {
            float: left;
        }
        .right {
            float: right;
        }
    </STYLE>
</HEAD>
<BODY>
    <DIV>
        <P><SPAN class='left'>Tums</SPAN><SPAN class='right'>29</SPAN>
        <P><SPAN class='left'>Oxydativedecarboxilization</SPAN><SPAN class='right'>42</SPAN>
        <P><SPAN class='left'>appdata</SPAN><SPAN class='right'>C:\Users\Ian\AppData\Local</SPAN>
    </DIV>

    <UL>
        <LI class='line1'><P class='left'>Tums<P class='right'>29
        <LI class='line2'><P class='left'>Oxydativedecarboxilization<P class='right'>42
        <LI class='line3'><P class='left'>appdata<P class='right'>C:\Users\Ian\AppData\Local
    </UL>

    <DIV>
        <P class='left'>Tums<P class='right'>29
        <P class='left'>Oxydativedecarboxilization<P class='right'>42
        <P class='left'>appdata<P class='right'>C:\Users\Ian\AppData\Local
    </DIV>
</BODY>
</HTML>

错误地渲染为：

所需的渲染：

奖金阅读

Answer 1

你只需要清除浮子。 http://jsfiddle.net/P7KuB/2/

<div>
<p><span class='left'>Tums</span><span class='right'>29</span></p>
<p><span class='left'>Oxydativedecarboxilization</span><span class='right'>42</span></p>
<p><span class='left'>appdata</span><span class='right'>C:\Users\Ian\AppData\Local</span></p>

.left { float: left; }
.right { float: right; }
p { overflow: hidden; }

Answer 2

.wrap {clear：both; }

<DIV>
    <P class="wrap"><SPAN class='left'>Tums</SPAN><SPAN class='right'>29</SPAN>
    <P class="wrap"><SPAN class='left'>Oxydativedecarboxilization</SPAN><SPAN class='right'>42</SPAN>
    <P class="wrap"><SPAN class='left'>appdata</SPAN><SPAN class='right'>C:\Users\Ian\AppData\Local</SPAN>
</DIV>

Answer 3

请参阅： http://jsfiddle.net/thirtydot/HkybR/2/

<强> HTML：

<div class="info">
    <div>
        <span class="left">Tums</span><span class="right">29</span>
    </div>
    <div>
        <span class="left">Oxydativedecarboxilization</span><span class="right">ATP</span>
    </div>
    <div>
        <span class="left">appdata</span><span class="right">C:\Users\Ian\AppData\Local</span>
    </div>
</div>

可能更具语义性。

<强> CSS：

.info {
    margin: 16px;
    padding: 8px;
    background: #fff;
    float: left;
    font-size: 21px;
    clear: both;
}
.info > div {
    overflow: hidden;
    text-align: right;
}
.info .left {
    float: left;
    padding-right: 10px;
}

Answer 4

<UL style="list-style-type: none;">
    <LI class='line1'>Tums<div class='right'>29</div></LI>
    <LI class='line2'>Oxydativedecarboxilization<div class='right'>42</div></LI>
    <LI class='line3'>appdata<div class='right'>C:\Users\Ian\AppData\Local</div></LI>
</UL>

呈现为......
Output of the above

您可能还需要更改UL元素的边距。

编辑：我想清晰的方法是一个更优雅的解决方案！

Answer 5

您的测试用例太复杂了。这是一个有效的多行版本：

<!DOCTYPE html>
<HTML>
<HEAD>
<HEAD>
    <TITLE>Home Page</TITLE>
    <STYLE type="text/css">
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .clear {
            clear:both;
        }            
    </STYLE>
</HEAD>
<BODY>
    <DIV>
        <P class="left clear">Left</P>
        <P class="right">Right</P>
        <P class="left clear">Left</P>
        <P class="right">Right</P>
        <P class="left clear">Left</P>
        <P class="right">RightRightRightRightRightRight RightRight RightRight RightRight</P>
    </DIV>
</BODY>
</HTML>

Answer 6

CSS添加

p, li { overflow:hidden; }

示例：http://jsbin.com/asulih/

如何左右对齐HTML中的多行？

6 个答案: