1

我知道这个问题可能已经在这里每天都在讨论，但是在 IE9 中我的分区显示仍然存在问题。大多数解决方案都指向溢出：隐藏和空白：nowrap，或添加额外的边距，但这些似乎都不起作用。

这是我的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 似乎不同意它。请问有人有什么想法吗？谢谢！

4

1 回答 1

0

添加宽度：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;" 的跨度 或“显示：内联块；” 在这种情况下，您可以使用 li 更改所有 div

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

你不需要漂浮任何东西

于 2013-03-09T19:17:25.623 回答