0

<p>次のような固定幅の要素に線があります。

<p class="line">
To be, or not to be, 
<span class="variant">that is the question,</span>
<span class="variant right">&nbsp<b>&minus;</b>&nbsp</span>
</p>

&minus;「-」を行の右端に移動し、残りのテキストを左揃えにしようとしています。モックアップモデルを作成しているので、HTMLとCSS（できればCSS3ではない）のみを使用してこれを行う必要があります。それを行う方法があるように感じますが、それがどうなるかは考えられません。

どんな助けでもいただければ幸いです。

ありがとう。

4

4 に答える 4

3

CSSで： 

.right{
    float:right;
}
于 2012-07-18T14:17:54.050 に答える
1

このjsFiddleの例のように？

CSS

.variant.right {
    float:right;
}​

HTML

<p class="line">
To be, or not to be, 
<span class="variant">that is the question,</span>
<span class="variant right">&nbsp;<b>&minus;</b>&nbsp;</span>
</p>​
于 2012-07-18T14:18:51.597 に答える
1

これをHTMLから分離したい場合は、この方法で行うことができます（具体的には、コンテンツレイヤーではなく、プレゼンテーションレイヤーに対して）

p.line:after { 
    content: " - "; 
    font-weight: bold; 
    float: right;
}

</ p> 

<p class="line">
    To be, or not to be, 
    <span class="variant">that is the question,</span>
</p>

jsFiddle： http: //jsfiddle.net/fch5J/6/

于 2012-07-18T14:20:31.160 に答える
1

-このようなものには、十分なテキストがある場合に、段落テキストが上に表示されないようにするという追加の利点があります。あなたは本質的に、-住むための「樋」を作成しています。

p.line {
  position: relative;
  padding-right: 2em;
}
p .right { 
  position: absolute;
  right: 0;
  text-align: right;
  width: 2em;
}

段落ブロックの上部または下部に関連してを一貫して表示する場合は、topまたはbottomルールを追加することもできますp.right-

于 2012-07-18T14:21:13.360 に答える