jQuery UI - 圖標對齊

在下面的示例中，我試圖讓文本，輸入框和圖標對齊而不重疊。jQuery UI - 圖標對齊

http://jsfiddle.net/zGZM7/2/

有一些CSS我失蹤？

感謝

編輯，可悲的是我需要一個解決方案將與FF和IE6 :(

來源

2011-06-20 Raoul

您是指所有元素在同一行上，沒有包裝到下一行？ – andyb

@andyb對不起，這正是我要找的。 Niklas提供了一個可行的解決方案。謝謝 – Raoul

不是問題，我只是想澄清:-) – andyb

你在你的小提琴，唯一相關的位有很多不相關的CSS的工作是沒有得到被稱爲它在你的榜樣，需要爲下ul id爲#icons卸下ul#icons有以下幾點：。

.ui-icon {float: left; margin: 0 4px;}

應該使其工作像你描述

例如：
http://jsfiddle.net/niklasvh/kTFw7/

來源

2011-06-20 09:17:22 Niklas

完美的，正是我一直在尋找，抱歉額外的CSS。您的解決方案完美運作 – Raoul

對不起是一個害蟲。我已經在FF中測試過了，這很好，但在IE6中，它仍然在一個新的線上。有沒有辦法解決這個問題？謝謝。 – Raoul

@Raoul你可以用條件顯示給IE6用戶使用這種CSS：http://jsfiddle.net/kTFw7/25/（注意內聯td的寬度） – Niklas

分割他們在不同的TDS

<table> 
    <tr> 
     <td>Foo</td> 
     <td><input type=text id=Foo class=textInput></td> 
     <td><a href="#" class="ui-state-default ui-corner-all ui-icon ui-icon-triangle-1-s"></a></td> 
    </tr> 
</table>

或

添加樣式浮動：左到輸入

<td> 
    <input type=text id=Foo class=textInput style="float:left"> 
    <a href="#" class="ui-state-default ui-corner-all ui-icon ui-icon-triangle-1-s"></a> 
</td>

或類似尼克拉斯的想法

.ui-icon {float: right; margin: 0 2px;}

來源

2011-06-20 09:21:52 jargalan

jQuery UI - 圖標對齊

回答

相關問題