如何强制元素保持在同一行

Question

嗨,我有一个以下的CSS:

div.container {
 height:20px;
 overflow: hidden;
 margin: 15px 0px;
 padding:5px 10px 5px 10px;
 white-space: nowrap;  
}

div.content{
 width:100%;
 float:left;
 display:inline;
}

div.content a {
 float:left;
 padding: 2px 2px;
 border: 1px solid #cccccc;
 text-align:center;
}

div.content a:hover {
 background-color:#433FC1;
 color:#fff;
 text-decoration:none;
}

span.current_link {
 font-weight: bolder;
 float:left;
 padding: 2px 5px 2px 5px;
 margin: 1px 2px 0 2px;
 text-align:center;
}

这是我的HTML:

<div class="container">
    <div class="content"> 
        Some text      
        <span class="current_link">Current link</span> 
        <a href="#">Link1</a>
        <a href="#">Link2</a>
        <a href="#">Link3</a>
        <a href="#">Link4</a>
        <a href="#">Link5</a>
    </div>
</div>

现在我想在我的页面输出中呈现这样的
Some text Current link Link1 Link2 Link3 Link4 Link5全部在同一行中,现在我的输出看起来像这样

Some text 
Current link Link1 Link2 Link3 Link4 Link5

如何让它们出现在同一行？谢谢

最新消息:

我删除了浮动:左; 来自a和span元素并添加了white-space:nowrap; 到内容,现在我的输出看起来像这样:

Some text Link1 Link2 Link3 Link4 Link5
Current link

我们似乎在这里正确的轨道,只有当前链接起床在同一行:)谢谢

另一个更新:

当我使用firebug从Current链接中删除元素时,所有内容都出现在同一行中,但此内容是由javascript生成的,我不能只删除span标记,因为更多页面使用相同的javascript.

Answer 1

删除浮动并添加div.content { white-space: nowrap; },看看是否能解决您的问题.

Answer 2

float:left从<span>和中删除<a>.这毫无意义.那些已经是inline元素.