CSS在段落中向左和向右浮动？ [英] CSS float left and right in paragraph with span?

问题描述

到现在为止，当我有一行例子

Until now, when I had one line with example

previous --- page width --- next

previous --- page width --- next

我使用了一个容器div有2个孩子，样式为float：left& float：right

I used a container div with 2 children, styled float:left & float:right

我认为它可以从一个段落行，span可能是这样：

I am think it could be done from one paragraph line with span's maybe something like:

<p><span class="s-left">previous</span><span class="s-right">next</span></p>

我尝试使用CSS：

span.s-left { text-align: left; }
span.s-right { text-align: right; }

但是不行。

推荐答案

这是因为 span 默认显示为 inline 它没有在中对文本进行对齐的宽度（这是一个非常宽松的描述，但现在它会做的）。

That's because span is by default displayed inline, so it has no defined width for the text to be aligned in (that's a very loose description, but it'll do for now).

如果你想要右对齐和左对齐的文本，这不是很难，只是：

If you want to have right and left aligned text it's not much harder, just:

p {
text-align: right;
}
span.s-left {
float: left;
}

演示可在 JS Bin

这篇关于CSS在段落中向左和向右浮动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！