【发布时间】：2013-10-16 08:23:12
【问题描述】：
我在尝试水平对齐一个 DIV 中的 3 个 DIV 时遇到了一些麻烦（这不是我所知道的最复杂的任务）。
我已经设法让这个在 FireFox 中工作，但由于某种原因，在 IE 中，每个 DIV 似乎都显示在主 DIV 中的新行上。
FF 中的示例输出（按预期/要求）：
DIV1 DIV2 DIV3
IE 中的示例输出：
DIV1
DIV2
DIV3
我已将我的小提琴附在此处：http://jsfiddle.net/oampz/u6bWR/1/
奇怪的是，在我的 jsFiddle 上它在 IE 和 FireFox 中看起来很好，但在我的应用程序中，使用完全相同的代码，我遇到了上述问题。
HTML：
<div class="ctr-full">
<div class="wrap">
<div class="grid-wrap">
<div class="grid one-whole">
<ul class="list">
<li>
<div class="toggle_head toggleInputbackground" style="position: relative;">
<div class="one-fiftieths" style="display: inline-block; vertical-align: middle; padding-top:10px;">
<img src="/images/expand.png" border="0" alt="Expand" class="expand"></img>
<img src="/images/collapse.png" border="0" alt="Collapse" class="collapse"></img>
</div>
<div class="nineteen-twentieths" style="display: inline-block; vertical-align: middle; padding-top:10px;">
<label>Step 1 > Enter Details</label>
</div>
<div style="display: inline-block; vertical-align: middle; padding-top:10px;">
<label>?</label>
</div>
</div>
<div class="toggle_body">
<ul>
<li>
<label>text text text.</label>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS：
.toggleInputbackground {
background: #B8B8B8;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #B8B8B8), color-stop(100%, #B8B8B8));
background-image: -webkit-linear-gradient(#B8B8B8, #B8B8B8);
background-image: -moz-linear-gradient(#B8B8B8, #B8B8B8);
background-image: -o-linear-gradient(#B8B8B8, #B8B8B8);
background-image: linear-gradient(#B8B8B8, #B8B8B8);
color: #5C5C5C;
height: 45px;
}
.nineteen-twentieths {
width: 95%;
}
.one-fiftieths {
width: 2%;
}
.one-whole {
width: 100%;
}
.ctr-full {
background: whitesmoke;
padding: 12px 0;
*zoom: 1;
}
.ctr-full:after {
content:"";
display: table;
clear: both;
}
.wrap {
width: 90%;
margin: 0 auto;
padding: 0 20px;
max-width: 1440px;
*zoom: 1;
}
.wrap:after {
content:"";
display: table;
clear: both;
}
.grid-wrap {
margin-left: -24px;
*zoom: 1;
}
.grid-wrap:after {
content:"";
display: table;
clear: both;
}
.grid {
float: left;
padding-left: 24px;
}
.list li, .list dt, .list dd {
padding: 4px 0;
}
jQuery：
//hide the all of the element with class msg_body
$(".toggle_body").hide();
$(".collapse").hide();
//OnClick of a header componenet, toggle the visibility of all images which are direct children of .toggle_head
$(".toggle_head").click(function () {
//alert("You clicked");
var $this = $(this);
$this.next(".toggle_body").slideToggle("slow", function () {
$this.children('img').toggle();
});
});
我希望它是我错过的一些简单的东西。
谢谢
更新（硬编码宽度：）
<div class="toggle_head toggleReportInputbackground one-whole" style="display: inline-block;">
<div style="display: inline-block; padding-top:10px; width:5%;">
<img src="/images/expand.png" border="0" alt="Expand" class="expand"></img>
<img src="/images/collapse.png" border="0" alt="Collapse" class="collapse"></img>
</div>
<div style="display: inline-block; padding-top:10px; width:80%;">
<label class="boldText">Enter Details</label>
</div>
<div style="display: inline-block; padding-top:10px; width:5%;">
<label>?</label>
</div>
</div>
如您所见，我使用了 5%、80% 和 5% 的宽度，留出 10% 备用。我还从 3 个内容中删除了 vertical-align: middle; >divs 和 position: relative; 来自主/容器 div
我在这里约会了我的小提琴：http://jsfiddle.net/oampz/u6bWR/2/
再一次，它在 FF 中看起来很好。IE 仍然显示在新行上。
【问题讨论】：