強制兩個並排塊元素中的第二個填充父元素？

在設計數據輸入表單時，我發現很難在「包裝器」中填寫剩餘空間的第二列「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>

來源

2011-02-24 Orange Kid

您可以通過刪除從右邊欄浮動，給它一個左邊距等於左邊的列的寬度做到這一點。

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

來源

2011-02-24 17:06:44

這樣做。現在由於缺乏浮動，如果它太小，第二列不再下降。這不是什麼大不了的事情，但是你是否知道保持這種行爲並保持寬度的方法？ – 2011-02-24 17:18:34

@Orange Kid：http://jsfiddle.net/668P2/2/？ http://jsfiddle.net/668P2/3/？ – thirtydot 2011-02-24 17:53:11

@橙子孩子我不認爲你可以同時使用這兩種技術。這很接近，但rightcol周圍的最裏面的包裝不會延伸以填充右側的額外空間。 http://jsfiddle.net/668P2/9/ – 2011-02-24 18:48:16

強制兩個並排塊元素中的第二個填充父元素？

回答

相關問題