如何在HTML中左右对齐多行？答案

【问题标题】：How to align left and right align multiple lines in HTML?如何在HTML中左右对齐多行？
【发布时间】：2012-05-13 01:43:01
【问题描述】：

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

┌─────────────────────────────────────┐
│ 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>

错误地呈现为：

所需的渲染：

额外阅读

【问题讨论】：

很多人似乎在建议“清除你的花车”。由于我不知道这意味着什么，并且将 P 修改为 overflow:hidden 会破坏该网站，因此我将等待一些支持来提示哪些答案是正确的。

标签： html css alignment

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

【讨论】：

【解决方案2】：

.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>

【讨论】：

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

【讨论】：

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

呈现为...

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

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

【讨论】：

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

【讨论】：

我不会一直使用div-p-p-p，有时真的会使用ul-li-li-li
没关系。只要它们是块级元素，您就会成为黄金。注意：使用列表时，您必须删除列表样式。请参阅 CSS 文档中的 list-style-type、margin 和 padding。 en.wikipedia.org/wiki/HTML_element#Block_elements
好吧，我还是希望项目符号出现，只是右边的东西在右边对齐。
好的，那就不要碰list-style-type。

【解决方案6】：

CSS 添加

p, li { overflow:hidden; }

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

【讨论】：