1

「値」を右揃えにしたい。これは私のHTMLです：

<p class="blueBold">Existing Building</p>
<p class="values">19,322 sf</p>
</br>
<p class="blueBold">Acreage</p>
<p class="values">3</p>

...そして私のCSS：

.blueBold {
    color: navy;
    font-weight: bold;
    font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
    display: inline-block;
}
.values {
    color: white;
    text-align:right;
    display: inline-block;
}

右端をハグする値を取得するにはどうすればよいですか?

jsfiddle はこちら: http://jsfiddle.net/clayshannon/wvuQz/1/

4

5 に答える 5

1

セマンティックアプローチ:

<div>
  <p class="blueBold">Existing Building</p>
  <p class="values pull-right">19,322 sf</p>
</div>
<div>
  <p class="blueBold">Acreage</p>
  <p class="values pull-right">3</p>
</div>

CSS:

.pull-right {
  float: right;
}

デモ: http://jsfiddle.net/wvuQz/7/

詳細: http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/

于 2013-09-13T04:44:21.590 に答える
1

which を使用しdisplay: inline-block;て要素をインラインにします。これはもはや ablock level elementではないため、テキストをleftまたは に揃えるスペースがありませんright。

要素を a 内にラップし、要素を にラップするdivだけfloatですright。

デモ

また、使用しています

.wrap {
   overflow: hidden; /* This will clear floats */
}

より明確に修正するには、以下のスニペットを使用して、親要素でクラスを呼び出すこともできます。

.clear:after {
   clear: both;
   display: table;
   content: "";
}

要素が境界内にとどまるようwidthに、ここに割り当てることもできます。.wrap

于 2013-09-13T04:27:42.343 に答える
1

あなたの質問を正しく理解できたかどうかわかりません。ただし、 a を追加するwidthと、以下のようにテキストをボックスに右揃えにすることができます。

.blueBold {
    color: navy;
    font-weight: bold;
    font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
    display: inline-block;
    width: 200px;
}
.values {
    color: white;
    text-align:right;
    width: 100px;
    display: inline-block;
}

ワーキングデモ

注: これは、テキストを画面の右端に揃えるためのものではありません。これは、要素内のテキストを.valuesボックス内で右揃えにするためです。

于 2013-09-13T04:28:04.863 に答える
1

ブロックの親コンテナーでは、テキストが機能するように配置する必要があります。あなたの場合、それは体そのものです.. DEMO 

body {
    background-color: orange;
    text-align:right;
}
于 2013-09-13T04:28:15.580 に答える
1

これを試して：）

.blueBold {
color: navy;
position:absolute;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
           }
.values {
color: white;
text-align:right;
      }

フィドル: http://jsfiddle.net/wvuQz/5/

于 2013-09-13T04:29:34.120 に答える