在 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 部分很长（很长）。

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

@菲尔 这就是它的样子——它在 chrome 中是这样的

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

编辑：找出问题所在。

'floatr' css 是问题所在。如果我删除所有内容都会向左移动并排成一行。使用 float:right 它向右移动但移动到下一行。我猜是 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

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

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

Answer 4

它很脏，但在这里。您可能需要根据您的分辨率调整最小宽度。

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

}

Answer 5

这是一个 Internet Explorer 问题。像这样把 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>