HTML/CSS使用兩種自動寬度列

我有一個非常困難的時期達到以下效果：HTML/CSS使用兩種自動寬度列

========================================================== 
= Variable Width = <input style="width: 100%" />  = 
==========================================================

我使用下面的HTML：

<dl> 
    <dt> 
    <label>Variable Width</label> 
    </dt> 
    <dd> 
    <input style="width: 100%" /> 
    </dd> 
</dl>

請注意，我爲了便於閱讀，我們修剪了HTML。

任何人都可以提出什麼CSS我應該用來實現這種效果？我寧願不必使用display: table，因爲我正在尋找達到IE7的跨瀏覽器兼容性。

來源

2011-09-21 Wex

你想讓它做什麼？ – Dave

如果沒有<table>或display: table，這是「難以置信的困難」，直到你知道如何！

參見：http://jsfiddle.net/thirtydot/aLgwt/

這個工作在IE7和更高+所有現代瀏覽器。

dt { 
    float: left 
} 
dd { 
    overflow: hidden; 
    padding: 0 4px 0 9px 
} 
dd input { 
    width: 100% 
}

解釋它爲什麼起作用is here。

來源

2011-09-21 18:07:19 thirtydot

我提名你爲官方* CSS上帝* ...除了'overflow：hidden'，我什麼都沒有...... – Wex

啊，但是你可以有多個dt/dd並且讓他們有相同的自動計算寬度在桌子上？這就是我想在沒有JavaScript的情況下看到的。 :) –

順便說一句，如果你想擁有固定的右列，但左一個具有自動與您可以將此模式更改爲：

CSS：

dt { 
    float: right; 
} 
dd { 
    overflow: hidden; 
    padding: 0 4px 0 9px; 
} 
dd input { 
    width: 100% 
}

通知書的，label應反正在input之前。

來源

2013-12-12 16:57:52 LionSoft

HTML/CSS使用兩種自動寬度列

回答

相關問題