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;
}

以下是结果，可视化：

铬

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

IE

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

结果在Firefox中也很好看。我相当确定浮点数和内联块是导致问题的，但是就像我之前提到的那样，我远远不能正确理解CSS和浏览器技巧的复杂性，所以如果有人能指出我是什么，我将非常感激解决这个问题的最佳方法。另外请原谅我们设计不好的方块，我相信有更好的方法可以实现同样的目标。

Answer 1

我已经做了一个非常简单的例子，说明如何简化这个问题。如果我能进一步解释，请告诉我们。）

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

有一个小提琴 - 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;
}

两个div包含彼此相邻的列表 - 不在IE上工作

1 个答案: