-1

私の連絡先情報には、このような行がいくつかあります。

Phone: 123 456
Web site: page.eu

セミコロンの上に垂直方向の配置を作成したいと思います。そのための1つの方法は、2つの異なるdivを使用し、それらを左にフロートさせ、一方のコンテンツを右揃えに、もう一方のコンテンツを左揃えに設定することだと思います。しかし、もっときちんとした方法はありますか？

4

3 に答える 3

1

固定幅のフローティングdivまたはテーブル（ただし、ベストプラクティスではないため、自慢しないでください）

http://jsfiddle.net/pXScG/3/

于 2012-08-04T14:02:17.257 に答える
1

これが連絡先情報のリストであるように見えることを考えると、最初にlist-elementを使用し、次に2つのスパンを使用してテキストを含めて整列させることをお勧めします。

<ul id="contact">
    <li><span class="contactMethod">Phone</span>:<span class="contactInfo">123 456</span></li>
    <li><span class="contactMethod">Web site</span>:<span class="contactInfo">page.eu</span></li>
</ul>

CSSを使用する場合：

span {
    display: inline-block;
}

span.contactMethod {
    width: 30%;
    text-align: right;
}

span.contactInfo {
    width: 65%;
    text-indent: 0.5em;
}​

JSフィドルデモ。

于 2012-08-04T14:03:00.033 に答える
1

この例にはセミコロン（;）はありません。コロン（:)を意味していると思います。持っているのはデータのテーブルなので、ここではHTMLテーブルが最も適切な構造であり、最初の列を単純に右揃えにすると、目的のレンダリングが得られます。ただし、パディングも設定することをお勧めします。

<style>
th { text-align: right; font-weight: normal;  padding-right: 0.3em; }
</style>
<table>
<tr><th>Phone: <td>123 456
<tr><th>Web site:<td>page.eu
</table>
于 2012-08-04T14:48:52.630 に答える