1

これは以前に尋ねられたことがあると思いますが、検索の言い回しがよくわかりません。

左側に見出し、右側に情報を記載した事実のリストが必要です。これは私がこれまでに持っているものです：

これが私が見たい方法です

ただし、右側にテキストを入れすぎると、テキストが正しく配置されたままにならず、見出しの下に表示されます。

正しくない

テキストを右側に揃えるにはどうすればよいですか？これが私が使用しているCSSです：

.about-fact {
    border-bottom: 1px dotted #aaa;
    padding: 10px 0;
}
.about-headline {
    display: inline-block;      /* Aligns the content to be the same */
    width: 100px;
    float:left;
    font-weight: bold;
}
.about-value {

}

HTMLの例：

<div class="about-fact">
    <div class="about-headline">Profession:</div>
    <div class="about-value">Studying Computer Science at Carleton University</div>
</div>
<div class="about-fact">
    <div class="about-headline">Experience:</div>
    <div class="about-value">Resume</div>
</div>
4

3 に答える 3

3

提案

  1. overflow: hidden;親に追加します。
  2. 削除しinline-block;ます。
  3. floatにとを追加widthし.about-valueます。

float を含むように CSS を変更します。

.about-fact {
    border-bottom: 1px dotted #aaa;
    padding: 10px 0;
    overflow: hidden;
}
.about-headline {
    width: 100px;
    float: left;
    font-weight: bold;
}
.about-value {
    float: left;
    width: auto;
}
于 2013-01-01T15:43:35.410 に答える
2

まず、マークアップをもう少しセマンティックにします。

<dl class="about-facts">
    <dt>Profession:</dt>
    <dd>Studying Computer Science at Carleton University</dd>
    <dt>Experience:</dt>
    <dd>Resume</dd>
</dl>​

もちろん、これにはCSSの変更も必要です。ラッピングがなくなったdivため、境界線を左端まで延長するには、次のように設定する必要はありpadding-leftませんmargin-left。

.about-facts dt {
    padding: 10px 0;
}
.about-facts dt {
    width: 100px;
    float: left;
    font-weight: bold;
}
.about-facts dd {
    padding: 10px 0 10px 120px;
    border-bottom: 1px dotted #aaa;
}

JSFiddle： http: //jsfiddle.net/ekMZ6/1/

于 2013-01-01T15:56:17.120 に答える
1

このcssを試してください

.about-value {
    margin-left: 100px;
}​

デモ: http://jsfiddle.net/k4aQ5/

于 2013-01-01T15:46:05.370 に答える