html - 强制两个并排 block 元素中的第二个填充父元素？

Question

在设计数据输入表单时，我发现很难让“wrapper”中的第二列“rightcol”填充剩余空间。我曾经成功地让子元素正确显示，但是，使用 border-bottom 属性，边框会延伸到包装器的整个宽度。

当列并排时，如何让“rightcol”填充右侧的空白区域？

下面是我的表格的迷你擦洗版本。这是一个 jsFiddler http://jsfiddle.net/jEfQF/

<style type="text/css">
    ul { margin: 0; padding: 0; }
    li { list-style-type: none; list-style-position: outside; }
    #row { border-bottom: solid 1px #F00; }
    #wrapper { width: 100%; display: inline-block; }
    #leftcol { vertical-align: top; width: 350px; float: left; margin-right: 10px; }
    #rightcol { vertical-align: top; float: left; }
</style>

<ul>
    <li id="row">Row 1: <input type="text"></input></li>
    <li id="wrapper">
        <ul id="leftcol">
            <li id="row">Column A Row 1: <input type="text"></input></li>
            <li id="row">Column A Row 2: <input type="text"></input></li>
        </ul>
        <ul id="rightcol">
            <li id="row">Column B Row 1: <input type="text"></input><br />Here's another line in this row.</li>
            <li id="row">Column B Row 2: <input type="text"></input></li>
            <li id="row">Column B Row 3: <input type="text"></input></li>
        </ul>
    </ul>
    <li id="row">Row 3: <input type="text"></input></li>
    <li id="row">Row 4: <input type="text"></input></li>
    <li id="row">Row 5: <input type="text"></input></li>
</ul>

Answer 1

您可以通过从右列中删除 float 并为其提供等于左列宽度的左边距来实现此目的。

<style type="text/css">
    ul { margin: 0; padding: 0; }
    li { list-style-type: none; list-style-position: outside; }
    #row { border-bottom: solid 1px #F00; }
    #wrapper { width: 100%; display: inline-block; }
    #leftcol { vertical-align: top; width: 350px; float: left; margin-right: 10px; }
    #rightcol { margin-left: 350px; vertical-align: top; }
</style>