html - 在 DIV 内水平对齐 DIV - IE 不工作

Question

我在尝试在一个 DIV 中水平对齐 3 个 DIV 时遇到了一些麻烦(这不是我所知道的最复杂的任务)。

我已经设法让这个在 FireFox 中工作，但出于某种原因，在 IE 中，每个 DIV 似乎显示在主 DIV 中的一个新行上。

FF 中的示例输出(如预期/要求):

DIV1 DIV2 DIV3

IE 中的示例输出:

DIV1

DIV2

DIV3

我在这里附上了我的 fiddle :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

我在这里约会了我的 fiddle :http://jsfiddle.net/oampz/u6bWR/2/

同样，它在 FF 中看起来很好。IE 仍然显示在新行上。

Answer 1

尝试将 float:left 赋给所有三个 DIV。这可能会解决您的问题。