1

この問題はおそらく毎日ここで議論されていることを知っていますが、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>

現時点ではクロムで正しく実行されていますが、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スパン」をすばやくグーグルで検索します。スパンタグはインライン要素です。style = "display：block;"でスパンを使用できます または「display：inline-block;」この場合、li内のすべてのdivを

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

そして、あなたは何も浮かぶ必要はありません

于 2013-03-09T19:17:25.623 に答える