如何強制元素留在同一行

您好我有下面的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元素和增加的空白：nowrap;內容現在我的輸出看起來是這樣的：

Some text Link1 Link2 Link3 Link4 Link5 
Current link

我們似乎是正確的軌道上，只有當前鏈接起牀:)謝謝

另一個更新同一行：

當我從當前鏈接中使用螢火蟲刪除元素時，所有內容都出現在同一行中，但是此內容正由javascript生成，因此我無法刪除span標籤，因爲更多頁面使用相同的javascript。

來源

2009-12-11 ant

從<span>和<a>刪除float:left。這沒有意義。這些已經是inline元素。

來源

2009-12-11 13:17:00 BalusC

我用新輸出更新了我的問題。 – ant 2009-12-11 13:29:09

您已做出其他更改或已經遺漏了其他信息。當我將你的CSS/HTML複製到一個空白模板並刪除兩個不必要的浮動塊（我沒有添加nowrap，因爲它沒什麼意義），它在這裏完美工作。 – BalusC 2009-12-11 13:51:24

它適用於我，以及當我粘貼到一個空白頁面，也許一些一般的CSS是干擾，我可以覆蓋的東西 – ant 2009-12-11 13:56:05

刪除浮動並添加div.content { white-space: nowrap; }並查看是否可以解決您的問題。

來源

2009-12-11 13:24:07

要小心，如果內容長於父元素和/或屏幕，'nowrap'會導致溢出/滾動條。 – BalusC 2009-12-11 13:28:57

我用新的輸出更新了我的問題。 – ant 2009-12-11 13:29:46

如何強制元素留在同一行

回答

相關問題