div內的div跳轉到IE中的下一行

我知道這個問題可能已經在這裏每天討論過了，但我仍然在IE9中顯示我的分區時遇到問題。大多數解決方案指向溢出：隱藏和空白：nowrap，或添加額外的保證金 - 正確，但這些似乎都沒有工作。div內的div跳轉到IE中的下一行

這裏是我的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似乎並不認同它。有人有任何想法嗎？謝謝！

來源

2013-03-07 Jeroen

我不明白這個問題。剛剛在IE9上測試過你的演示。 http://jsfiddle.net/XuD6j/ – otinanai 2013-03-07 15:24:03

嗯，IVE在IE9中打開了你的提琴，它似乎確實工作，但後來我想知道爲什麼它不工作在我的實際網頁上：http://www.doenwatikkan.nl /jeroen/login.php 這是歡迎頁面之後的第二頁。我不想發佈整個事情，因爲它有點混亂，但是必須有一些額外的東西與IE9不兼容。 – Jeroen 2013-03-07 15:34:23

我確定應該有一個css屬性，將'div'設置爲'display：block'。讓我檢查一下。 – otinanai 2013-03-07 15:40:09

add width：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將非常easyer閱讀，如果你發佈這樣的：（代碼中沒有變化已經在這裏做，只是空格）

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

google的快速「html span」。 span標籤是一個內聯元素。您可以使用style =「display：block;」的跨度或「display：inline-block;」在這種情況下，你可以改變李裏面所有div有

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

和你不需要任何浮動

來源

2013-03-09 19:17:25 caramba

div內的div跳轉到IE中的下一行

回答

相關問題