3

ここに画像の説明を入力

ご覧のとおり、改行後にテキストを揃える必要があります。

まずは表にしてみました。しかし、ご覧のとおり、各アイテムの幅は異なります（メモ、湿度など）。そのため、各項目ごとに各テーブルを作成する必要がありました。正しくないと思います。

そして、私はこれを試しました。

li.list {
    padding-left: 3.5em;
    text-indent: -3.5em;
}

動作しているように見えましたが、正確にemは、異なるブラウザー (モバイルを含む) によって異なるスペースが表示されました。両立できなかったということです。

それを解決するきちんとした簡単な方法があることを願っています..

4

3 に答える 3

7

解決策 1:

フィドル:
http://jsfiddle.net/38GpE/2/

CSS:

.pretext
{
    font-weight:bold;
    display:inline-block;
    vertical-align:top;
}

.text
{
    width:300px;
    display:inline-block;
}

HTML:

<ul>
    <li>
        <div class="pretext">Something: </div>
        <div class="text">
            ...text...
        </div>
    </li>
</ul>

明らかな問題は箇条書きです...あなたの例では、箇条書きを非表示にして（マイナス記号）を使用<li>するだけでよいようです。list-style:none;-

それでも十分でない場合は、箇条書きを非表示にして a を配置するとうまくいくbackground: url(mybullet.png) no-repeat left top;可能性があります。

解決策 2:

を使用した別のソリューションdisplay:table-cellですが、これは IE7 ではサポートされていないことに注意してください。ただし、この利点は、2 番目の列の幅を定義する必要がないことです。

フィドル:
http://jsfiddle.net/38GpE/3/

CSS:

.pretext
{
    font-weight:bold;
    display:table-cell;
    vertical-align:top;
    white-space:nowrap;
}

.text
{
    display:table-cell;
}

解決策 #3:

コメントで、を使用する必要はないと言っていました<li>。面倒ですが、項目ごとにテーブルを定義していただけないでしょうか。

フィドル:
http://jsfiddle.net/zuPcx/

HTML:

<table>
    <tr>
        <td class="pretext">Something:</td>
        <td>{your text}</td>
    </tr>
</table>

<table>
    <tr>
        <td class="pretext">Something else:</td>
        <td>{your text}</td>
    </tr>
</table>

CSS:

.pretext
{
    font-weight:bold;
    display:table-cell;
    vertical-align:top;
    white-space:nowrap;
}

.text
{
    display:table-cell;
}
于 2013-04-19T06:13:55.290 に答える
1 
//HTML   
 <div class="container">
        <span class="textHeading">Something: </span>
        <p class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis odio a quam rutrum cursus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sed elit in urna vulputate mollis. Nam luctus tincidunt imperdiet. Morbi adipiscing, lorem quis tempus rhoncus, mauris orci rutrum tortor, ultricies porta libero velit quis nisl. Aenean molestie magna quis leo consectetur bibendum. 
        </p>
    </div>

    <div class="container">
        <span class="textHeading">Something else: </span>
        <p class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis odio a quam rutrum cursus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sed elit in urna vulputate mollis. Nam luctus tincidunt imperdiet. Morbi adipiscing, lorem quis tempus rhoncus, mauris orci rutrum tortor, ultricies porta libero velit quis nisl. Aenean molestie magna quis leo consectetur bibendum. 
        </p>
    </div>

//CSS

    textHeading, .text{
        display: inline-block; vertical-align: top;
    }
    .textHeading
    {
        font-weight:bold;   
        width: 120px;
        /*text-align: right;*/
    }
    .text
    {
        width:500px;
        padding:0; margin:0;
        width: 400px; 
    }


    You can check here: `http://jsfiddle.net/49EBr/2/
于 2013-04-19T07:25:48.087 に答える