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元素。

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

2 个答案: