1

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

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

例如：

在此处输入图像描述

注意：之前已询问过此问题的单行变体

这是我在 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>

错误地呈现为：

在此处输入图像描述

所需的渲染：

在此处输入图像描述

额外阅读

4

6 回答 6

2

你只需要清除你的花车。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; }
于 2012-05-12T17:10:42.070 回答
1

.wrap { 清除：两者；}

<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>
于 2012-05-12T17:06:27.720 回答
1

见：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;
}​
于 2012-05-12T17:10:12.320 回答
1 
<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>

呈现为...
以上的输出

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

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

于 2012-05-12T17:35:25.670 回答
0

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

<!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>​
于 2012-05-12T17:06:20.320 回答
0

CSS 添加

p, li { overflow:hidden; }

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

于 2012-05-12T17:08:22.173 回答