jquery - 在 Internet Explorer 中将一个 div 强制到一行

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>

我确实根据之前提出的问题尝试过这个，但它似乎不起作用。在 chrome 和 firefox 中，它在没有溢出和空白的情况下工作正常，但我需要它在 IE6 和 IE8 中工作(我知道它们很旧但我们不要去那里，我不喜欢自己工作) HTML+CSS: How to force div contents to stay in one line?

overflow: hidden;
white-space: nowrap;

我正在使用 jquery 来根据用户的操作显示和隐藏。不确定这是否搞砸了。

当我在 IE 中进入开发人员模式时，两个 div flow 和 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 div 中，但没有结果。 javascript 部分很长(很长)。

@Mrchief 我认为 js 没有任何相关性。如果不点击任何页面，页面将无法正确加载。现在包含 CSS。

@菲尔这就是它应该的样子 - 它在 chrome 中是这样的

这是它在 IE 中的样子。请参阅 div 流的蓝色边框。是两排我试图在一行中显示它。希望现在有点清楚了。

编辑:找出问题所在。

'floatr' CSS 是问题所在。如果我删除所有内容都向左移动并排成一行。使用 float:right 它会向右移动但会移动到下一行。我猜是 IE 的特定问题。有什么见解吗？

好的。弄清楚了!问题是当 float:right 被读取时，IE 不知道从哪一行开始 float ，所以它移动到下一行。要解决这个问题，你可以这样做。将 float 代码放在第一位!

<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

是否在 <nobr>not gonna wrap</nobr> 中围绕您可能包装的 HTML工作？