強制一個div在Internet Explorer中的一行

Question

我的設置是這樣的。

<div id="header"> 
<div id="heading">Title</div> 
<div id="flow"> 
Enter Something: 
    <input type="textbox" size="30" id="id" class="class" onkeyup="dosomething()" /> 
    <input id="show" type="button" value="Add" onclick="dosomething()"> 
    <input id="hide" type="button" value="Search" onclick="dosomething()"> 
    <input id="hide1" type="button" value="Clear" onclick="dosomething()"> 
    <input class="floatr" type="button" value="Val" onClick="dosomething()"> 
    <input class="floatr" type="button" value="Val" onclick="dosomething()"> 
</div> 


<div id="flow1">  
    <textarea readonly="readonly" cols="56" rows="1" value="" id="Search" class="allSearch"/></textarea> 

    <input class="floatr" type="button" value="val" onClick="dosomething()"> 
    <input class="floatr" type="button" value="val" onClick="dosomething()"> 
</div> 

</div> 

我確實試過這個問題，但它似乎並沒有工作。在鉻和火狐它沒有溢出和空白工作正常，但我需要它在IE6和IE8的工作（我知道他們是老，但我們不去那裏，我不喜歡在它自己工作） HTML+CSS: How to force div contents to stay in one line?

overflow: hidden; 
white-space: nowrap; 

我正在使用jQuery顯示和隱藏取決於用戶的行爲。不知道這是否搞亂了。

當我去開發人員模式在IE兩個div流和flow1是兩行而不是一個。 有什麼建議嗎？

編輯：CSS部分

#heading 
{ 
    text-align:center; 
    font-size:20px; 
} 

#header 
{ 
    background-color:#85C2FF; 
    padding-bottom:.6em; 
    padding-left:.4em; 
    padding-right:.4em; 
    white-space: nowrap; 
    overflow: hidden; 
} 

.floatr 
{ 
    float:right; 
} 

我曾嘗試把空白和溢出#flow專區內，但沒有結果。 javascript部分很長（非常長）。

@Mrchief我不認爲js有任何相關性。沒有點擊任何內容，頁面無法正常加載。現在包含CSS。

@Phil 這是應該的樣子 - 它在鉻

這是怎麼看起來像在IE中。看到div流的藍色邊框。這是兩排。我試圖將其顯示在一行中。 希望現在有點清楚。

編輯：找出問題所在。

'floatr'css是個問題。如果我刪除所有內容都會左移一行。隨着浮動：右移動到右邊，但到下一行。我猜測，IE特定的問題。任何見解？

好的。弄清楚了！這個問題是當float：right被讀取時IE不知道哪一行開始浮動，所以它移動到下一行。要解決這個問題，你可以這樣做。把浮點代碼放在第一位！

<div id="flow"> 
<input class="floatr" type="button" value="Val" onClick="dosomething()"> 
<input class="floatr" type="button" value="Val" onclick="dosomething()"> 
    Enter Something: 
     <input type="textbox" size="30" id="id" class="class" onkeyup="dosomething()" /> 
     <input id="show" type="button" value="Add" onclick="dosomething()"> 
     <input id="hide" type="button" value="Search" onclick="dosomething()"> 
     <input id="hide1" type="button" value="Clear" onclick="dosomething()"> 

</div> 

希望這可以幫助別人。在過去的兩個小時裏，我一直在嘲笑我。謝謝你們的幫助。

Answer 1

這是一個Internet Explorer問題。首先像這樣放置浮動語句。

<div id="flow"> 
<input class="floatr" type="button" value="Val" onClick="dosomething()"> 
<input class="floatr" type="button" value="Val" onclick="dosomething()"> 
    Enter Something: 
     <input type="textbox" size="30" id="id" class="class" onkeyup="dosomething()" /> 
     <input id="show" type="button" value="Add" onclick="dosomething()"> 
     <input id="hide" type="button" value="Search" onclick="dosomething()"> 
     <input id="hide1" type="button" value="Clear" onclick="dosomething()"> 

</div> 

Answer 2

是否在<nobr>not gonna wrap</nobr>工作中包圍了可能的包裝HTML？

Answer 3

的問題是有點含糊，但這裏是我的猜測：

浮動兩個div的（流動和流1）到左： #flow, #flow1 { float:left; }

設置它們的顯示屬性內聯： #flow, #flow1 { display:inline; }

你也應該確保div的寬度不會太大而不能內聯。

Answer 4

試試這個：

<div id="header"> 
    <div id="heading">Title</div> 
    <div id="flow" style="float: left"> 
     Enter Something: 
     <input type="textbox" size="30" id="id" class="class" onkeyup="dosomething()" /> 
     <input id="show" type="button" value="Add" onclick="dosomething()"> 
     <input id="hide" type="button" value="Search" onclick="dosomething()"> 
     <input id="hide1" type="button" value="Clear" onclick="dosomething()"> 
     <input class="floatr" type="button" value="Val" onClick="dosomething()"> 
     <input class="floatr" type="button" value="Val" onclick="dosomething()"> 
    </div> 
    <div id="flow1" style="float: left">  
     <textarea readonly="readonly" cols="56" rows="1" value="" id="Search" class="allSearch"/></textarea> 
     <input class="floatr" type="button" value="val" onClick="dosomething()"> 
     <input class="floatr" type="button" value="val" onClick="dosomething()"> 
    </div> 
</div> 

您需要使用定位 「浮動」 的div。

Answer 5

它很骯髒，但它在這裏。您可能需要根據您的分辨率調整最小寬度。

#header{ 
    min-width: 1200px; 
} 
#flow{ 
    float:left; 
} 
#flow1{ 
    float:left; 

}