Question

在设计数据输入表单时，我发现很难在“包装器”中获得第二列“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

你可以通过从右列移除浮动并给它左边距等于左列的宽度来做到这一点。

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

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

1 个答案: