CSS - 无法在同一行上对齐文本元素

Question

我正在尝试创建一个页脚栏，其左侧对齐文本元素，右侧对齐，但是我遇到了一些困难。

这是我到目前为止所做的：

HTML

<div id="footer_bar">
    <div id="footer_bar_content">
        <p>
            Left Text
        </p>

        <p class="align_right">
            Right Text
        </p>
    </div>
</div>

CSS

#footer_bar
{ 
    width:100%;
    position:absolute; 
    margin:0; 
    bottom:0; 
    height:30px; 
    border-top:2px #eeeeee solid; 
    background-color:#f7f7f7; 
}

#footer_bar_content     { padding-left:15%; padding-right:15%; }
#footer_bar_content p   { line-height:30px; margin:0; color:#222; font-size:11px; display:inline; }

.align_right    { text-align:right; width:100%; }

有人可以帮我弄清楚出了什么问题吗？ align_right类似乎没有任何效果。

Answer 1

而不是段落你应该采取

左..类似的权利和使用.left {float：left}和.right {float：right}然后.footer_bar_content：在{clear：both}之后为你工作

Answer 2

您可以相应地尝试浮动right或left，

HTML

<div id="footer_bar">
    <div id="footer_bar_content">
        <p class="left">
            Left Text
        </p>

        <p class="right">
            Right Text
        </p>
    </div>
</div>

样式表

#footer_bar
{ 
    width:100%;
    position:absolute; 
    margin:0; 
    bottom:0; 
    height:30px; 
    border-top:2px #eeeeee solid; 
    background-color:#f7f7f7; 
}

#footer_bar_content { padding: 0 15%; }
#footer_bar_content p { line-height:30px; margin:0; color:#222; font-size:11px; display:inline; }
.right { float:right; }
.left { float:left; }

以下是 Demo

Answer 3

#footer_bar_content p.align_right {float:right; width:100%;}

如果你想让你的文字在右侧，并且在宽度上稍微玩一下，那么试试这个，因为你想要给出100％的主要宽度，这是整个地方，所以可能它会以新的一行显示。

Answer 4

你必须在类align_right中删除width = 100％并使用＆＃34; float：right＆＃34;而不是＆＃34; text-align：right＆＃34;

CSS：

.align_right    { float:right;}

代码：JSFIDDLE

Answer 5

 <div id="footer_bar">
    <div id="footer_bar_content">
        <p>
            Left Text


        <span style="float: right;">
            Right Text
        </span>
        </p>
    </div>
 </div>

Answer 6

这就是你要找的东西。看看fiddle。 http://jsfiddle.net/GD8tL/1/

使用float代替align

#footer_bar
{ 
    width:100%;
    position:absolute; 
    margin:0; 
    bottom:0; 
    height:30px; 
    border-top:2px #eeeeee solid; 
    background-color:#f7f7f7; 
}

#footer_bar_content     { padding-left:15%; padding-right:15%; }
#footer_bar_content p   { line-height:30px; margin:0; color:#222; font-size:11px; display:inline; }

.align_right{ float:right;}