如何確保按CSS顛倒的按鈕均勻分佈？

我有一個嚮導式的HTML表單，其中有一排用於後退/下一步/取消操作的提交按鈕（按此順序）。該表單還可以包含不同數量的輸入字段，如文本字段，單選按鈕，複選框，下拉列表（選擇標籤）和文本區。客戶需要「下一步」按鈕作爲默認操作，以便如果用戶鍵入文本字段並按下Enter鍵，則應提交表單，就好像他們點擊了「下一步」按鈕一樣。如何確保按CSS顛倒的按鈕均勻分佈？

問題是，在這種情況下，瀏覽器（至少IE，這是我們客戶使用的99％）使用表單中聲明的第一個按鈕提交表單，正如您從上面的列表中看到的那樣是「後退」，而不是「下一步」。

一個修復我讀到是聲明以相反的順序返回和下一步按鈕（即，接着第一個），然後使用CSS圍繞正確的方式顯示它們，像這樣：

<html> 
    <head> 
    <style type="text/css"> 
     .formSubmitButtons { 
     direction: rtl; 
     float: left; 
     } 
     .formSubmitButtons input { 
     direction: ltr; 
     float: none; 
     } 
    </style> 
    </head> 
    <body> 
    <form action="blah" method="POST" enctype="application/x-www-form-urlencoded"> 
     <div class="formSubmitButtons"> 
     <input type="submit" name="btnNext" value="Next"> 
     <input type="submit" name="btnBack" value="Back"> 
     </div> 
     <input type="submit" name="btnCancel" value="Cancel"> 
     <br/>Some text fields go here... 
    </form> 
    </body> 
</html>

這提供了期望的行爲和按鈕順序在Firefox和IE中，但取消按鈕相對於其他按鈕的間距不一致。在IE6中它看起來不錯，但是在Firefox 3.0.5中，取消按鈕被阻塞在Next按鈕上。

有誰知道我需要編織哪些CSS魔法才能讓這三個按鈕在兩個瀏覽器中均勻分佈？

（通過排序按鈕下一頁/返回/取消迴避問題不是一個選項）

（也感謝大家誰提出基於JavaScript的解決方案，但不是所有的客戶允許JS，所以它必須是一個直接的HTML和/或CSS解決方案）

這裏就是我最後做的是工作很好（基於克萊的建議）：

<!-- 
<input type="submit" name="btnNext" style="position: absolute; left: -9999px" tabindex="-1"> 
<input type="submit" name="btnBack" value="Back"> 
<input type="submit" name="btnNext" value="Next"> 
<input type="submit" name="btnCancel" value="Cancel"> 
-->

（忽略了包裝的註釋標記，他們只是讓你可以看到HTML）

來源

2009-03-04 Andrew Swan

個人而言，我更喜歡一個Javascript解決方案，它允許您將默認提交按鈕更改爲您選擇的任何按鈕。減少混亂併爲您提供靈活性。 – cbp 2009-03-04 05:16:48

您是否考慮過使用this trick？基本上你只是首先出現一個隱藏的按鈕，它執行所需的操作。

來源

2009-03-04 04:57:35 cletus

我試過類似的東西，但我會再給它一次，讓你知道。與此同時，如果任何人都可以讓我的原始方法始終看起來不錯，那也會受到歡迎。 – 2009-03-04 05:01:43

該技巧可行，但會以某種方式影響某些用戶。在IE中，當您單擊文本字段時，第一個可見按鈕（後退）周圍會出現一個黑色邊框，但按Enter鍵後，隱藏的下一個按鈕將生效。所以它看起來像按回車鍵將返回，但它會繼續。 – 2009-03-04 05:17:16

雖然這個伎倆並沒有像現在這樣運作，但它讓我朝着正確的方向發展，所以這足以讓我成爲你的接受答案。我將添加我對問題所做的全部細節。 – 2009-03-04 23:49:02

你能不能定義一個樣式

.btnMargin { 
    margin-left:5px; 
    margin-right:5px; 
}

而只是將其應用於按鈕

<input type="submit" name="btnNext" class="btnMargin" value="Next"> 
<input type="submit" name="btnBack" class="btnMargin" value="Back"> 
... 
<input type="submit" name="btnCancel" class="btnMargin" value="Cancel">

？

如果您對所有人都具有相同的樣式，它似乎會產生Next/Back和Back/Cancel之間的幾個像素差異。如果至關重要的是不會發生這種情況，您可以爲按鈕定義單獨的邊距。？

來源

2009-03-04 05:07:24 Jaanus

我擺弄了各種邊距設置，但無法使它在兩個瀏覽器中都能很好地工作。 – 2009-03-04 23:45:47

這使後面的按鈕，下一個，取消訂單，彼此相鄰。唯一的缺點是你必須在第一個按鈕容器上設置一個特定的寬度才能在IE7中工作。它沒有在Firefox和IE8中工作正常。

文檔類型非常重要，以便頁面以符合標準的模式呈現。如果沒有它，頁面將顯示爲怪異模式，這會使IE以完全不同的間距顯示錶單元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style type="text/css"> 
    .formButtons { float: left; } 
    .formSubmitButtons { width: 120px; } 
    .formSubmitButtons input { float: right; } 
    .formFields { clear: both; } 
</style> 
</head> 
<body> 
    <form action="blah" method="POST" enctype="application/x-www-form-urlencoded"> 
    <div class="formButtons formSubmitButtons"> 
     <input type="submit" name="btnNext" value="Next"> 
     <input type="submit" name="btnBack" value="Back"> 
    </div> 
    <div class="formButtons"> 
     <input type="submit" name="btnCancel" value="Cancel"> 
    </div> 
    <div class="formFields"> 
     Some text fields go here... 
    </div> 
    </form> 
</body> 
</html>

來源

2009-03-04 07:18:18 Guffa

使按鈕type =「button」而不是type =「submit」。然後，添加一個隱藏字段，例如：

<hidden name="continue" value="Next"/>

最後，添加JavaScript onclick處理的按鈕，它首先隱藏字段的值設置爲按下的按鈕的名稱，然後提交表單。

來源

2009-03-04 12:54:11

爲什麼你不只是浮動右取消按鈕？

如果它只是一個Firefox的問題，你可以使用這樣的屬性選擇器 input [name =「btnCancel」] {float：right;}或margin-left或任何你想要的。否則，只需在輸入上使用類。

來源

2009-03-04 23:28:12 user73912

如何確保按CSS顛倒的按鈕均勻分佈？

回答

相關問題