1

我试图在同一行上获得两行文本，一个在左侧，另一行在右侧。

CSS：

.topbar {
    background-image:url(images/bar_bg.png);
    height:62px;
}

.topbar span{
    font-family:Arial;
    font-weight:bold;
    font-size:15px;
    color:#494963;
    margin: 0;
    padding-left:280px;
    padding-top:15px;
}

.topbar span.left{
    font-family:Arial;
    font-size:15px;
    color:#494963;
    margin: 0;
    padding-right:380px;
    padding-top:15px;
}

HTML：

<div class="topbar">
    <span class="left">Contact Us or Come see us at our Branch</span>
    <span>11 HIGH  STREET, TOWN CENTER, Bristol, BA140IO </span>
</div>
4

3 回答 3

2

您可能必须将跨度 css 设置为：

display: inline-block !important;

我遇到了跨度从父 div 继承块显示的问题，或者包含的 css 文件更改了跨度显示类型默认值的类似问题。

通过设置为 inline-block 跨度应该按预期显示而不使用浮点数。就我个人而言，我尽量避免浮动。

这是布局如何工作的一个很好的例子： div 和 span: display = 'block', 'inline', or 'inline-block' ?

于 2012-07-23T20:30:42.857 回答
2

使用你的float属性！:]

span { 
 float: right;
}

span.left {
 float: left;
}

（必要时不要忘记清除！）

于 2012-07-23T20:23:41.707 回答
1

确实很简单。您需要利用 CSSfloat属性。

http://jsfiddle.net/4cTFP/

于 2012-07-23T20:25:02.330 回答