css - div 内的 div 在 IE 中跳转到下一行

Question

我知道这里可能每天都在讨论这个问题，但我仍然无法在 IE9 中显示我的部门。大多数解决方案指向 overflow:hidden 和 whitespace:nowrap，或添加额外的 margin-right，但这些似乎都不起作用。

这是我的 CSS 部分:

form.cmxform fieldset{
margin: 1em 2.4em 2.4em;
padding: 1em 2em 1em 2em;
border:2px solid black;
background:#FCFCFC;
}

form.cmxform legend {
font-size:14pt;
padding: 2 5 5 5px;
font-weight: bold;

}
form.cmxform label {

vertical-align: top;
text-align:left;
float: left;
width:450px;
}
form.cmxform fieldset ol {
margin: 0;
padding: 0;
}
form.cmxform fieldset li {
list-style: none;
padding: 5px;
margin: 0;
}  

div {
         display: inline-block;
         overflow: hidden;
         white-space: nowrap;
         }

li > div{
/*  width:750px;*/
border:none;
font-size:14px;
border:1px solid red; /* added for visibility */
display: inline-block;
overflow: hidden;
white-space: nowrap;
margin-right:3px;
}

li > div > div {
display: inline-block;
overflow: hidden;
white-space: nowrap;
border:1px solid black; /* added for visibility */
text-align:center;      /* added for style */
width:100px;
float:left;
margin-right:3px;
}

这是它应该适用的 html。

<form action="verwerking.php" method="post" class="cmxform">
<fieldset>
<legend>Hoe is dit kind op de peuterspeelzaal?</legend>
  <ol>
     <li><label>&nbsp;</label><div><div>Zeker Niet</div><div>&nbsp;</div><div>&nbsp;   </div><div>&nbsp;</div><div>Zeker Wel</div></div></li>
     <li><label>&nbsp;</label><div><div>--</div><div>-</div><div>0</div><div>+</div><div>++</div></div></li>
     <li><label>Dit kind neemt zonder problemen afscheid van de ouder</label><div>
     <div><input type="radio" name="p_afsche_pr13" value="1"></div>
     <div><input type="radio" name="p_afsche_pr13" value="2"></div>
     <div><input type="radio" name="p_afsche_pr13" value="3"></div>
     <div><input type="radio" name="p_afsche_pr13" value="4"></div>
     <div><input type="radio" name="p_afsche_pr13" value="5"></div></div></li>
</ol>
</fieldset>

目前它在 chrome 中运行正确，但 IE 似乎不同意它。有人有什么想法吗？谢谢!

Answer 1

添加宽度:600px；到 form.cmxform 字段集{}

form.cmxform fieldset {
    margin: 1em 2.4em 2.4em;
    padding: 1em 2em 1em 2em;
    border:2px solid black;
    background:#FCFCFC;
    width:600px;
}

如果您这样发布您的 html 将更容易阅读:(这里没有做任何改动，只是代码中有空格)

<form action="verwerking.php" method="post" class="cmxform">
<fieldset>
    <legend>Hoe is dit kind op de peuterspeelzaal?</legend>
    <ol>
        <li>
            <label>&nbsp;</label>
            <div>
                <div>Zeker Niet</div>
                <div>&nbsp;</div>
                <div>&nbsp;</div>
                <div>&nbsp;</div>
                <div>Zeker Wel</div>
            </div>
        </li>
        <li>
            <label>&nbsp;</label>
            <div>
                <div>--</div>
                <div>-</div>
                <div>0</div>
                <div>+</div>
                <div>++</div>
            </div>
        </li>
        <li>
            <label>Dit kind neemt zonder problemen afscheid van de ouder</label>
            <div>
                <div>
                    <input type="radio" name="p_afsche_pr13" value="1">
                </div>
                <div>
                    <input type="radio" name="p_afsche_pr13" value="2">
                </div>
                <div>
                    <input type="radio" name="p_afsche_pr13" value="3">
                </div>
                <div>
                    <input type="radio" name="p_afsche_pr13" value="4">
                </div>
                <div>
                    <input type="radio" name="p_afsche_pr13" value="5">
                </div>
            </div>
        </li>
    </ol>
</fieldset>

也可以快速搜索“html span”。 span 标签是一个内联元素。您可以使用带有 style="display:block;"的跨度或“显示:内联 block ；”在这种情况下，您可以使用

更改 li 内的所有 div

<span style="display:inline-block;">xxxXXXxxx</span>

而且你不需要 float 任何东西