Как обеспечить равномерное расположение кнопок, обращенных CSS? - PullRequest
Новая
       10

Как обеспечить равномерное расположение кнопок, обращенных CSS?

1 голос
/ 04 марта 2009

У меня есть HTML-форма в стиле мастера с рядом кнопок отправки для действий Назад / Далее / Отмена (в этом порядке). Форма также может содержать различное количество полей ввода, таких как текстовые поля, переключатели, флажки, раскрывающиеся списки (выбрать теги) и текстовые области. Клиент требует, чтобы кнопка «Далее» была действием по умолчанию, поэтому, если пользователь вводит текстовое поле и нажимает клавишу «Ввод», он должен отправить форму, как если бы он нажал кнопку «Далее».

Проблема в том, что в этом сценарии браузер (по крайней мере, 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 кнопка «Отмена» зажата против кнопки «Далее».

Кто-нибудь знает, какую магию 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)

Ответы [ 5 ]

2 голосов
/ 04 марта 2009

Рассматривали ли вы использовать этот трюк ? Обычно сначала появляется скрытая кнопка, которая выполняет желаемое действие.

0 голосов
/ 05 марта 2009

Почему вы не просто отпустите кнопку Отмена, верно?

Если это проблема только Firefox, вы можете использовать селектор атрибутов, как это input [name = "btnCancel"] {float: right;} или margin-left или все, что вы хотите. В противном случае просто используйте классы на входах.

0 голосов
/ 04 марта 2009

Сделайте кнопки type = "button" вместо type = "submit". Затем добавьте скрытое поле, например ::100100 

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

Наконец, добавьте к кнопкам обработчики javascript onclick, которые сначала устанавливают значение скрытого поля для имени нажатой кнопки, а затем отправляют форму.

0 голосов
/ 04 марта 2009

Это расположит кнопки сзади, далее, отмена заказа, прямо рядом друг с другом. Единственным недостатком является то, что вы должны установить определенную ширину для первого контейнера кнопки, чтобы он работал в 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>
0 голосов
/ 04 марта 2009

Не могли бы вы просто определить стиль 

.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 будет несколько разной. Если важно, чтобы этого не произошло, вы можете определить отдельные поля для кнопок.

...