如何强制元素留在同一行 [英] How to force elements to stay in the same row

问题描述

您好我有一个以下的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; 
颜色：#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> 
一些文本
< span class =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> 
  

现在我希望在我的页面输出中呈现像这样的形式
一些文本当前链接链接1链接2链接3链接4链接5 所有在同一行中，现在我的输出看起来像这样

 一些文本
当前链接链接1链接2链接3链接4链接5 
  

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

新更新：

我删除了float：left;从a和span元素和增加的空白：nowrap;现在我的输出如下所示：

b

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

其他更新：

当前与萤火虫链接，但这个内容是由javascript生成的，我不能删除span标签，因为更多的页面使用相同的javascript。

>

从< span> 和< a>中删除 float：left 。这没有意义。那些已经是 inline 元素。

Hi I have a following 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 :

<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 this
Some text Current link Link1 Link2 Link3 Link4 Link5 all in the same line that is, right now my output looks like this

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 :

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.

解决方案

Remove float:left from <span> and <a>. This makes no sense. Those are already inline elements.

这篇关于如何强制元素留在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！