容器中的HTML複選框標籤未按預期方式顯示

以下HTML代碼嘗試在<div></div>容器內顯示覆選框。容器中的HTML複選框標籤未按預期方式顯示

<div style="overflow: auto; width: auto; display:block; max-height:130px; max-width:200px; background-color: #FFF; height: auto; border: 1px double #336699; padding-left: 2px;"> 
 
    
 
    <label for="chk12" style='white-space: nowrap;'> 
 
     <input type='checkbox' id="chk12" name='chk_colours' value="12" class='validate[required] text-input text'> 
 
     <div style='background-color:#FF8C00; width: 180px;' title="darkorange">&nbsp;&nbsp;</div> 
 
    </label>  
 
     
 
    <label for="chk11" style='white-space: nowrap;'> 
 
     <input type='checkbox' id="chk11" name='chk_colours' value="11" class='validate[required] text-input text'> 
 
     <div style='background-color:#D9D919; width: 180px;' title="brightgold">&nbsp;&nbsp;</div> 
 
    </label> 
 
    
 
    <label for="chk10" style='white-space: nowrap;'> 
 
     <input type='checkbox' id="chk10" name='chk_colours' value="10" class='validate[required] text-input text'> 
 
     <div style='background-color:#76EE00; width: 180px;' title="chartreuse2">&nbsp;&nbsp;</div> 
 
    </label> 
 
    
 
    <label for="chk9" style='white-space: nowrap;'> 
 
     <input type='checkbox' id="chk9" name='chk_colours' value="9" class='validate[required] text-input text'> 
 
     <div style='background-color:#2E0854; width: 180px;' title="indigo">&nbsp;&nbsp;</div> 
 
    </label> 
 
    
 
    <label for="chk8" style='white-space: nowrap;'> 
 
     <input type='checkbox' id="chk8" name='chk_colours' value="8" class='validate[required] text-input text'> 
 
     <div style='background-color:#292929; width: 180px;' title="gray16">&nbsp;&nbsp;</div> 
 
    </label>      
 
</div>

什麼它可以顯示在以下snap shot可見。

可以看出，這是使用以下<div>標籤

<div style='background-color:#FF8C00; width: 180px;' title="darkorange">&nbsp;&nbsp</div>

顯示的各種彩色條紋顯示它們各自的被預期即使我要被顯示在一條直線上的複選框下面使用white-space: nowrap;樣式屬性。

如何以直線顯示每個條紋及其各自的複選框？

它在我的問題本身的一個解釋，但在這個問題每個複選框到位等彩色條紋有一個文本標籤。 Here是。我試圖按照該問題的接受答案中提到的方式行事，但在這種情況下無濟於事。

來源

2012-11-12 Tiny

我建議你使用，而不是現在使用的內聯CSS外部CSS。 http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/ –

@Koen - 謝謝。這只是爲了舉例說明。 – Tiny

您已使用DIV標記標籤。 DIV默認爲塊元素。只需將其設置爲display: inline;或display: inline-block;即可。或者使用其他元素 - 例如SPAN。

來源

2012-11-12 22:48:12 feeela

無論您在CSS中做什麼，在標籤內使用'div'都是無效的HTML標記（儘管HTML5草案允許）。使用'span'是正確的做法（特別是當你真的想要元素內聯！）。 –

不要使用<div> s，它們是塊元素，導致它們不與複選框對齊。嘗試使用<span>！而非

編輯

或者添加float:right使用一點點CSS的彩色<div>小號

EDIT 2

的CSS：

label div{ 
    display: inline-block; 
}

示例：http://jsfiddle.net/koenpunt/Ca22j/

來源

2012-11-12 22:47:47

在這裏你去:)

http://jsfiddle.net/Uaq85/

<div style="overflow: auto; width: auto; display:block; max-height:130px; max-width:200px; background-color: #FFF; height: auto; border: 1px double #336699; padding-left: 2px;"> 
 

 
    <label for="chk12" style='white-space: nowrap;'> 
 
     <input type='checkbox' id="chk12" name='chk_colours' value="12" class='validate[required] text-input text'> 
 
     <div style='background-color:#FF8C00; width: 180px;display:inline-block;' title="darkorange">&nbsp;&nbsp;</div> 
 
    </label>  
 

 
    <label for="chk11" style='white-space: nowrap;'> 
 
     <input type='checkbox' id="chk11" name='chk_colours' value="11" class='validate[required] text-input text'> 
 
     <div style='background-color:#D9D919; width: 180px;display:inline-block;' title="brightgold">&nbsp;&nbsp;</div> 
 
    </label> 
 

 
    <label for="chk10" style='white-space: nowrap;'> 
 
     <input type='checkbox' id="chk10" name='chk_colours' value="10" class='validate[required] text-input text'> 
 
     <div style='background-color:#76EE00; width: 180px;display:inline-block;' title="chartreuse2">&nbsp;&nbsp;</div> 
 
    </label> 
 

 
    <label for="chk9" style='white-space: nowrap;'> 
 
     <input type='checkbox' id="chk9" name='chk_colours' value="9" class='validate[required] text-input text'> 
 
     <div style='background-color:#2E0854; width: 180px;display:inline-block;' title="indigo">&nbsp;&nbsp;</div> 
 
    </label> 
 

 
    <label for="chk8" style='white-space: nowrap;'> 
 
     <input type='checkbox' id="chk8" name='chk_colours' value="8" class='validate[required] text-input text'> 
 
     <div style='background-color:#292929; width: 180px;display:inline-block;' title="gray16">&nbsp;&nbsp;</div> 
 
    </label>      
 
</div>

來源

2012-11-12 22:53:29

容器中的HTML複選框標籤未按預期方式顯示

回答

相關問題