0

所以我有这个相当奇怪的问题，我正在尝试排列一些divs但我遇到了这个奇怪的问题。假设如果我放入<input type="checkbox" />一个 div 并尝试将它与其他 div 排在同一行中，无论我尝试什么都行不通，但是如果我向第二个 div 添加一些文本，它突然开始工作，为什么会这样发生？

这是我的代码示例，可以让事情更清晰：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;
}
4

2 回答 2

2

每当你使用display: inline-block它总是一个好主意，也指定vertical-align: top（或bottom取决于你想要什么）。这将防止这个问题。

于 2012-06-20T18:34:41.303 回答
2

您也可以使用 float 属性。只需将两个 div 浮动到左侧并确保 overflow: hidden 设置为上面的容器以防止浮动问题。

我编辑了你的样本：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-20T18:37:48.767 回答