html - 两个 div 包含彼此相邻的列表 - 不适用于 IE

Question

大家好，如果这个问题已经被问到，让我提前道歉。这对你们所有人来说可能都是微不足道的，但我从来没有真正过多地处理过 CSS，因为我的工作到目前为止还不需要它。

所以为了说明问题，我先贴出代码。这是 HTML 部分:

<asp:Panel runat="server" ID="Panel3" CssClass="topPanel">
                      <h2 style="margin-left:30px">Summary</h2>
                  <div class="column">
                    <ul>
                        <li><label for="LoanNo" class="Labels3">Loan Id</label> <input runat="server" type="text" id="LoanNo" class="TextBoxes-Small" readonly="readonly" /></li>
                        <li><label for="OrigLoanId" class="Labels3">Originator Loan Id</label> <input runat="server" type="text" id="OrigLoanId" class="TextBoxes-Small" readonly="readonly"/></li>
                        <li><label for="LoanStatus" class="Labels3">Loan Status</label> <input runat="server" type="text" id="LoanStatus" class="TextBoxes-Small" readonly="readonly"/></li>
                        <li><label for="LockStatus" class="Labels3">Lock Status</label> <input runat="server" type="text" id="LockStatus" class="TextBoxes-Small" readonly="readonly"/></li>
                        <li><label for="Channel" class="Labels3">Channel</label> <input runat="server" type="text" id="Channel" class="TextBoxes-Small" readonly="readonly"/></li>
                    </ul>
                 </div>

                 <div class="column">
                    <ul>
                        <li><label for="WWProgram" class="Labels3">WinWater Program</label> <input runat="server" type="text" id="WWProgram" class="TextBoxes-Small" readonly="readonly"/></li>
                        <li><label for="WWProduct" class="Labels3">WinWater Product</label> <input runat="server" type="text" id="WWProduct" class="TextBoxes-Small" readonly="readonly"/></li>
                        <li><label for="trLockDate" class="Labels3">Lock Date</label> <input runat="server" type="text" id="trLockDate" class="TextBoxes-Small" readonly="readonly"/></li>
                        <li><label for="trLockExpDate" class="Labels3">Lock Expiration Date</label> <input runat="server" type="text" id="trLockExpDate" class="TextBoxes-Small" readonly="readonly"/></li>
                        <li><label for="trPurchaseDate" class="Labels3">Purchase Date</label> <input runat="server" type="text" id="trPurchaseDate" class="TextBoxes-Small" readonly="readonly"/></li>
                        <li><label for="trCancelDate" class="Labels3">Cancel Date</label> <input runat="server" type="text" id="trCancelDate" class="TextBoxes-Small" readonly="readonly"/></li>
                    </ul>
                </div>

</asp:Panel>

这是 CSS:

.topPanel {
border-bottom: 1px solid #0055a8;
float:left;
width:100%;
padding-bottom: 15px;
}

ul, li{
margin:0;
padding:0 0 0 15px;
list-style-type:none;  
}

.column{
    float:left;
    display:inline-block;
    margin: 0 5px 0 0;
}

    .Labels3 {
        float:left;
        display:inline-block;

        text-align: right;
        font-family: 'Segoe UI';
        font-size:15px;
        color: #0055a8;
        margin-left:10px;
        margin-bottom:6px;
    }

    .TextBoxes-Small {
        margin-left:5px;
        font-family: 'Segoe UI';
        font-size: 14px;
        width:175px;
        border-color: #0055a8;
        border-width: 1px;
        -moz-border-radius-bottomright: 5px;
        border-bottom-right-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        border-bottom-left-radius: 5px;
        -moz-border-radius-topright: 5px;
        border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        border-top-left-radius: 5px;
        vertical-align:central;
        padding-left:5px;
        margin-bottom:3px;

        float:right;
        display:inline-block;
    }


h2 {
font-family: 'Segoe UI';
        font-weight: bold;
        font-size: 16px;
        color: #0055a8;
        margin-left: 20px;
}

这是可视化的结果:

• Chrome

http://i.stack.imgur.com/a9VAw.png

• 浏览器

http://i.stack.imgur.com/Qwedw.png

结果在 Firefox 中看起来也不错。我相当确定是 float block 和内联 block 导致了问题，但是就像我之前提到的，我离正确理解 CSS 和浏览器技巧的复杂性还差得很远，所以如果有人能向我指出是什么，我将不胜感激解决此问题的最佳方法。也请原谅 block 的糟糕设计，我相信有更好的方法来实现同样的目标。

Answer 1

我已经做了一个非常简单的例子来说明如何简化它。让我知道是否可以进一步解释:)

基本上我删除了你的 <ul>现在标签向左浮动，然后清除以完美排列每个输入。应该在每个浏览器中工作。

有一个 fiddle - Fiddle Link!

HTML

<h2>Summary</h2>

<div class="column">
    <label for="LoanNo" class="Labels3">Loan Id</label>
    <input runat="server" type="text" id="LoanNo" class="TextBoxes-Small" readonly="readonly" />
    <label for="OrigLoanId" class="Labels3">Originator Loan Id</label>
    <input runat="server" type="text" id="OrigLoanId" class="TextBoxes-Small" readonly="readonly" />
    <label for="LoanStatus" class="Labels3">Loan Status</label>
    <input runat="server" type="text" id="LoanStatus" class="TextBoxes-Small" readonly="readonly" />
    <label for="LockStatus" class="Labels3">Lock Status</label>
    <input runat="server" type="text" id="LockStatus" class="TextBoxes-Small" readonly="readonly" />
    <label for="Channel" class="Labels3">Channel</label>
    <input runat="server" type="text" id="Channel" class="TextBoxes-Small" readonly="readonly" />
</div>

<div class="column">
    <label for="WWProgram" class="Labels3">WinWater Program</label>
    <input runat="server" type="text" id="WWProgram" class="TextBoxes-Small" readonly="readonly" />
    <label for="WWProduct" class="Labels3">WinWater Product</label>
    <input runat="server" type="text" id="WWProduct" class="TextBoxes-Small" readonly="readonly" />
    <label for="trLockDate" class="Labels3">Lock Date</label>
    <input runat="server" type="text" id="trLockDate" class="TextBoxes-Small" readonly="readonly" />
    <label for="trLockExpDate" class="Labels3">Lock Expiration Date</label>
    <input runat="server" type="text" id="trLockExpDate" class="TextBoxes-Small" readonly="readonly" />
    <label for="trPurchaseDate" class="Labels3">Purchase Date</label>
    <input runat="server" type="text" id="trPurchaseDate" class="TextBoxes-Small" readonly="readonly" />
    <label for="trCancelDate" class="Labels3">Cancel Date</label>
    <input runat="server" type="text" id="trCancelDate" class="TextBoxes-Small" readonly="readonly" />
</div>

CSS

body {
    font-family:'Segoe UI';
    color: #0055a8;
}
h2 {
    font-weight: bold;
    font-size: 16px;
}
.column {
    float: left;
    overflow: hidden;
    width: 400px;
}
.column label {
    display: block;
    float: left;
    clear: left;
    width: 160px;
    margin: 0 0 10px;
}
.column input {
    margin: 0 0 10px;
}
.TextBoxes-Small {
    font-size: 14px;
    border: solid 1px #0055a8;
    border-radius: 5px;
}