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;
}

如果您希望始终相对于段落块的顶部或底部显示，您还可以添加toporbottom规则p.right-

于 2012-07-18T14:21:13.360 回答