表單項目的問題

-1

我有一個只有文本框和按鈕的表單。他們在同一行，首先來到texttfield，然後是右邊的一個按鈕。問題是，該按鈕基於其上的標題進行擴展，並且文本字段必須填充該位置的其餘部分。要做到這一點我以前是這樣的：表單項目的問題

<html> 
    <head> 
     <style> 
     #search_form { 
     width:500px; 
     } 
     #search_button_container { 
     float: right; 
     } 

     #search_field_container { 
     overflow: hidden; 
     } 

     #search_field { 
     width:92%; 
     } 

     </style> 
    </head> 
    <body> 
     <form id="search_form"> 
     <div> 
     <div id="search_button_container"> 
     <input type="submit" value="Search" id="search_submit" /> 
     </div> 

     <div id="search_field_container"> 
     <input id="search_field" name="search_field" type="search" />          
     </div>         
     </div>               
     </form> 
    </body> 
</html>

在這個標記的按鈕是第一個項目，但由於浮=右它位於右側，這正是我想要的網頁上，但這會混淆tabindex順序。當標籤，首先按鈕將在焦點，然後是文本框，但我需要文本框是第一個。

注：我不能將tabindex = 1添加到textfield，tabindex = 2添加到按鈕，因爲上面還有其他元素，並且超出此搜索表單，並且tabindex必須從上到下移動。

是否有另一種方法來定位元素的方式我想要或重新排序tabindex。在我的情況下，最好的解決方案是使用另一種方式來達到預期的效果，但我無法弄清楚。

來源

2012-04-16 Hayk

將按鈕放在文本字段之後並將文本字段浮動到左側。

來源

2012-04-16 21:34:30

也許我沒有清楚地解釋自己。我想要右邊的按鈕，靠近表單右邊框，文本框必須填充左邊的剩餘空間。您可以複製我發佈的代碼，並在按鈕標題上添加更長的文本（更改值屬性），您將明白我想要的內容。 – Hayk 2012-04-16 21:43:42

我會讓按鈕固定寬度，即使這顯然不是你想要的。對不起，我在這裏沒有答案。我可以說的是，我認爲用'overflow：hidden'隱藏部分文本輸入是個壞主意，而且我還必須說，不使用tabindex就能使tab選項正確的唯一方法是首先將輸入放入文檔中。 – 2012-04-16 22:13:26

無論如何，謝謝您參加討論。 – Hayk 2012-04-16 22:31:33

CSS表格使用與HTML表格相同的算法，除非它與語義上無關。這只是渲染視覺上相同的方式。

然後你可以有2個單元組合，它們具有100％的寬度，並且每個單元的內容都適應彼此的長度。如果提交按鈕更長，搜索輸入將會縮短。

這裏有一個小提琴證明它：http://jsfiddle.net/4JvRV/1/
讓我知道，如果它沒有在Chrome中工作。
兼容性：IE8 +
回退爲IE7-：IE7和IE6將看到一個較短的扣機...犯錯文本輸入，完全可以接受的IMHO。或者你可以決定有100％的寬度，如果你願意，可以在兩行上顯示它們。

來源

2012-04-16 22:21:44 FelipeAls

謝謝，但我必須支持IE7及更高版本。 – Hayk 2012-04-16 22:29:19

我已經指出了IE7的回退，這似乎完全可以接受。它不會妨礙任何人使用表單輸入。但是如果你需要在IE7中進行像素完美的渲染，那麼告別語義並使用一個HTML表格，其中'td'就是我用'p'標記的東西。對於任何願意爲此褻瀆而貶低我的人，還請提供一個解決方案，可以在IE7中使用@Hayk添加的所有約束條件;） – FelipeAls 2012-04-16 22:44:49

我說服我的僱主說支持IE7會很貴。因爲它是。 – 2012-04-16 23:31:20

表單項目的問題

回答

相關問題