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

参照: 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 に答える
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 に答える
0

CSS 追加

p, li { overflow:hidden; }

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

于 2012-05-12T17:08:22.173 に答える
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 に答える