簡單的HTML divs襯裏「bug」

所以我有這個相當奇怪的問題，我想排隊一些divs，但我遇到了這個奇怪的問題。比方說，如果我把<input type="checkbox" />放在一個div裏面，並且會嘗試將它排成與其他div相同的行，那麼無論我嘗試什麼，它都不會工作，但是如果我向第二個div添加一些文本，它會突然開始工作，爲什麼發生了什麼？簡單的HTML divs襯裏「bug」

這裏是例子我的代碼，使事情更清楚一點：http://jsfiddle.net/wxgVw/2/

<div id="container"> 
    <div id="container2"> 
     <div id="left"> 
      <input type="checkbox" /> 
     </div> 
     <div id="right"> 

     </div> 
    </div> 
</div> 

body{ 
    margin:50px; 
} 

#container{ 
    width:770px; 
    height:400px; 
    border:1px solid red; 
} 

#container2{ 
    width:700px; 
    height:50px; 
    margin:10px; 
    outline:1px solid red; 
    padding:10px; 
} 

#left{ 
    width:30px; 
    height:30px; 
    outline:1px solid green; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
} 

#right{ 
    width:400px; 
    height:30px; 
    outline:1px solid black; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
}

來源

2012-06-20 Linas

把你的代碼的副本在你的問題。任何人都可以隨時更換小提琴;小提琴的未來存在是不能保證的。 –

@RobertHarvey我認爲「運行」按鈕只是更新結果標籤與您的更改，「更新」按鈕分支出一個新的版本（因此/ 2 /'，'/ 3 /'等URL ）... –

@Kinkink：好的。但是我們有能力在這裏發佈代碼;我們不應該僅僅依靠與外部資源的聯繫。 –

當你使用display: inline-block它始終是一個好主意，還可以指定vertical-align: top（或bottom取決於你想要什麼）。這將防止這個問題。

來源

2012-06-20 18:34:41

你也可以使用float屬性。只需將兩個div浮動到左側並確保溢出：隱藏設置爲上面的容器以防止浮動問題。

我編輯您的樣本： http://jsfiddle.net/wxgVw/4/

#container2{ 
    width:700px; 
    height:50px; 
    margin:10px; 
    outline:1px solid red; 
    padding:10px; 
    overflow:hidden; 
} 

#left{ 
    width:30px; 
    height:30px; 
    outline:1px solid green; 
    float:left; 
} 

#right{ 
    width:400px; 
    height:30px; 
    outline:1px solid black; 
    float:left; 
}

來源

2012-06-20 18:37:48 apparat

+1，這就是我做這件事的方式......少了很多CSS並且更容易預測。 – Sparky

簡單的HTML divs襯裏「bug」

回答

相關問題