在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和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部分是LONG（非常长）。

@Mrchief我认为js没有任何相关性。没有点击任何内容页面无法正确加载。现在包括CSS。

@Phil 它应该是这样的 - 它在chrome中

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

编辑：找出问题。

'floatr'ssss是问题所在。如果我删除所有内容都向左移动并在一行中移动。使用float：right，它向右移动但向下一行移动。我猜IE的具体问题。任何见解？

行。弄清楚了！这个问题是浮点数：右读取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

围绕<nobr>not gonna wrap</nobr>中可能包装的HTML工作吗？

Answer 2

问题有点模糊，但这是我的猜测：

将两个div（flow和flow1）浮动到左侧： #flow, #flow1 { float:left; }

将其显示属性设置为内联： #flow, #flow1 { display:inline; }

您还应该确保div的宽度不能太大而不能内联。

Answer 3

试试这个：

<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>

您需要使用“float”来定位div。

Answer 4

它非常脏但是它在这里。您可能需要根据分辨率调整最小宽度。

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

}

Answer 5

这是一个互联网浏览器问题。像这样把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>