Html 如何强制元素保持在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1887951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to force elements to stay in the same row
提问by ant
Hi I have a following css :
嗨，我有以下 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;
}
Here is my HTML :
这是我的 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>
Now I would like to get rendered in my page output like thisSome text Current link Link1 Link2 Link3 Link4 Link5all in the same line that is, right now my output looks like this
现在我想在我的页面输出中像这样Some text Current link Link1 Link2 Link3 Link4 Link5在同一行中呈现，现在我的输出看起来像这样
Some text
Current link Link1 Link2 Link3 Link4 Link5
How can I make them appear in the same line ? thank you
我怎样才能让它们出现在同一行？谢谢你
NEW UPDATES :
新更新：
I removed float:left; from the a and span element and added white-space:nowrap; to content and now my output looks like this :
我删除了 float:left; 来自 a 和 span 元素并添加了 white-space:nowrap; 到内容，现在我的输出如下所示：
Some text Link1 Link2 Link3 Link4 Link5
Current link
We seem to be on the right track here, only Current link to get up in same line :) thank you
我们似乎在这里走在正确的轨道上，只有当前链接才能在同一行:) 谢谢
ANOTHER UPDATE :
另一个更新：
Everything appears in the same line when I remove element from Current link with firebug, but this content is being generated by javascript and I cannot just remove the span tag because more pages use the same javascript.
当我使用 firebug 从 Current 链接中删除元素时，所有内容都出现在同一行中，但此内容是由 javascript 生成的，我不能只删除 span 标记，因为更多页面使用相同的 javascript。
回答by Tatu Ulmanen
Remove the floats and add div.content { white-space: nowrap; }and see if that solves your problem.
移除浮标并添加div.content { white-space: nowrap; }，看看是否能解决您的问题。
回答by BalusC
Remove float:leftfrom <span>and <a>. This makes no sense. Those are already inlineelements.
float:left从<span>和 中删除<a>。这没有任何意义。这些已经是inline元素了。
