关于jquery：在Internet Explorer中将div强制为一行


Force a div to one line in internet explorer

我的设置是这样的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Title

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()">



   
    <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()">

我确实是从之前提出的问题中尝试过的，但似乎没有用。在chrome和firefox中，它可以正常工作而不会出现溢出和空格，但是我需要在IE6和IE8中运行(我知道它们很旧，但是我们不要去那里了，我不喜欢自己使用它)
HTML + CSS：如何强制div内容保持一行？

1
2
overflow: hidden;
white-space: nowrap;

我正在根据用户的操作使用jquery显示和隐藏。不知道那是不是搞砸了。

当我进入IE中的开发人员模式时，两个divs flow和flow1是两行而不是一行。
有什么建议么？

编辑：CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#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(VERY LONG)。

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

@菲尔
这就是它的外观-在chrome中
This is how it should look like - it does in chrome

This is how it looks like in IE. See the blue border thats the div flow. Its two rows. I am trying to display it in one row.

这就是IE中的样子。看到div流动的蓝色边框。两行。我试图将其显示为一行。
希望现在已经清楚了。

编辑：找出问题。

问题是"浮动" css。如果我删除所有内容，则所有内容都向左移动并在一行中移动。使用float：right时，它将向右移动，但移至下一行。我猜这是IE特有的问题。有什么见解吗？

好。弄清楚了！问题是当读取float：right时，IE不知道从哪一行开始浮动，因此它将移至下一行。要解决该问题，您可以执行此操作。首先输入浮动代码！

1
2
3
4
5
6
7
<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()">

希望这对某人有帮助。在过去的两个小时中，我一直在为此努力。感谢您的帮助。

相关讨论

这是一个互联网浏览器问题。 像这样首先放置float语句。

1
2
3
4
5
6
7
<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()">

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

1
2
3
4
5
6
7
8
9
10
#header{
    min-width: 1200px;
}
#flow{
    float:left;
}
#flow1{
    float:left;

}
相关讨论

尝试这个：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    Title
   
        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()">
   
       
        <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(flow和flow1)浮动到左侧：
#flow, #flow1 { float:left; }

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

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

相关讨论

将您可能包装的HTML包围在not gonna wrap中是否有效？