Question

我试图在同一行上获得两行文字，一行在左边，另一行在右边。

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>

Answer 1

使用您的float属性！：

span { 
 float: right;
}

span.left {
 float: left;
}

（如果有必要，别忘了清除！）

Answer 2

确实非常简单。您需要利用CSS float属性。

http://jsfiddle.net/4cTFP/

Answer 3

您可能必须将span css设置为：

display: inline-block !important;

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

通过设置为内联块，跨度应按预期显示，而不使用浮点数。我个人尽量避免花车。

以下是布局如何工作的一个很好的示例： div and span: display = 'block', 'inline', or 'inline-block' ?

在div中的span类？

3 个答案: