47

テキストを同じ行に左揃え、中央揃え、右揃えにする必要があります。次のテキストがあります。

  • 左揃え: 1/10
  • 中央: 02:27
  • 右揃え: 100%

左揃えと右揃えのテキストでは機能するが、中央のテキストでは正しく機能しない次のコードを書きました。

HTML

<div id="textbox">
<p class="alignleft">1/10</p>
<p class="aligncenter">02:27</p>
<p class="alignright">100%</p>
</div>
<div style="clear: both;"></div>

CSS

.alignleft {
    float: left;
}
.aligncenter {
    float: left;
}
.alignright {
    float: right;
}
4

11 に答える 11

49

これを試して

更新しました

HTML

 <div id="textbox">
 <p class="alignleft">1/10</p>
 <p class="aligncenter">02:27</p>
 <p class="alignright">100%</p>
 </div>
 <div style="clear: both;"></div>​

CSS

.alignleft {
  float: left;
  width:33.33333%;
  text-align:left;
}
.aligncenter {
  float: left;
  width:33.33333%;
  text-align:center;
}
.alignright {
 float: left;
 width:33.33333%;
 text-align:right;
}​

ここでコードのデモを行います: http://jsfiddle.net/wSd32/1/ これがお役に立てば幸いです!

=======2021年更新:

HTML5 Flex を使用してこれを行うと、同じ結果が得られるようになりました。div をフローティングまたはクリアする必要はありません。Display: flex;配置したいアイテムを保持する親コンテナに追加するだけです。

HTML

<div id="textbox">
<p class="alignleft">1/10</p>
<p class="aligncenter">02:27</p>
<p class="alignright">100%</p>
</div>

CSS

#textbox {display:flex; flex-flow:row wrap;}

.alignleft {
width:33.33333%;
text-align:left;
}
.aligncenter {
width:33.33333%;
text-align:center;
}
.alignright {
width:33.33333%;
text-align:right;
}

Flex を使用した結果のデモ: http://jsfiddle.net/jcbiggar1/tsopnf4d/4/

Flex の詳細: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

于 2012-12-04T00:19:06.967 に答える
3

多分これはうまくいきます：

p{width:33%;float:left;}
.alignleft{text-align:left;}
.aligncenter {text-align:center;}
.alignright {text-align:right;}
于 2012-12-04T00:15:31.483 に答える
2

JCBiggar の優れたソリューションのバリエーションは、.alignright の幅とテキストの位置合わせをスキップして、単純に右にフロートさせることです。これの利点は、内側の要素にマージンまたはパディングが設定されているという懸念が取り除かれ、33.33% * 3 が包含要素の 100% の幅を超えることです。.alignright の目的の配置は、はるかに簡単に行うことができます。

CSS は次のようになります。

.alignleft {
  float: left;
  width:33.33333%;
  text-align:left;
  padding-left: 10px;
}
.aligncenter {
  float: left;
  width:33.33333%;
  text-align:center;
}
.alignright {
  float: right;
  padding-right: 10px;
}​

これは、上記の CSS に示されているように、設定された量のパディングが必要な (パーセンテージで表すことができない) 要素がある場合にうまく機能しました。

于 2014-08-26T14:54:51.500 に答える