Как правильно выравнивать эту кнопку отправки?

У меня есть большое количество для форм с кнопками отправки, и мне нужно выравнивать кнопки справа. Проблема в том, что когда я использую float: right, элемент submit вынимается из обычного потока документов. Это означает, что высота формы уменьшена, а нижняя граница помешает кнопке.Как правильно выравнивать эту кнопку отправки?

Вот код:

<html> 
<head> 
    <style type="text/css"> 
     #left-col { 
      width: 290px; 
     } 
     #loginForm { 
      border: 1px solid black; 
     } 
     #submit { 
      /* float: right; */ 
     } 

    </style> 
</head> 
<body> 
    <div id="left-col"> 
     <div id="loginForm"> 
      <form id="user-login-form" enctype="application/x-www-form-urlencoded" method="post" action=""> 
       <label for="email" class="required">Email</label> 
       <input type="text" name="email" id="email" value=""> 
       <label for="password" class="required">Password</label> 
       <input type="password" name="password" id="password" value=""> 
       <input type="submit" name="submit" id="submit" value="Login" class="submit"> 
      </form> 
     </div> 
    </div> 
</body> 
</html>

формы генерируются программно (с помощью Zend_Form), так что я в надежде избежать хаков, которые требуют дополнительных элементов (например, пункты с ясно: то и другое).

Надеюсь, это будет простой вопрос для гуру CSS!

Спасибо ...

источник

2012-01-11 Kim Prince

все тезисы элементы инлайн, так что я бы предполагать представить было бы в крайнем правом. – Ibu

Использование float: right; в FF и хром не изменил размер формы для меня. Можете ли вы уточнить, что происходит, что вы хотите изменить или предотвратить? –

Где вы хотите использовать метки в отношении текстовых полей? – JamesB41

Вы можете использовать CSS :after pseudoelement очистить контейнер, без добавления какой-либо дополнительная HTML-разметки.

Вы бы добавить что-то вроде этого, чтобы ваш CSS:

#loginForm:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

Или к form элемента, в зависимости от того, которое вы считаете более подходящим.

источник

2012-01-12 00:02:10 justis

Спасибо jblasco, это горячий совет –

Вот демон jsFiddle, который я сделал - http://jsfiddle.net/tm8bY/1/ - чтобы показать, как вы сможете достичь того, чего хотите.

Копия кода, используемого в демонстрационном:

<html> 
<head> 
    <style type="text/css"> 
     #left-col { 
      width: 290px; 
     } 
     #loginForm { 
      border: 1px solid black; 
     } 
     #submit { 
      /* float: right; */ 
     } 
     label { 
      display: block; 
     } 
    </style> 
</head> 
<body> 
    <div id="left-col"> 
     <div id="loginForm"> 
      <form id="user-login-form" enctype="application/x-www-form-urlencoded" method="post" action=""> 
       <label for="email" class="required">Email</label> 
       <input type="text" name="email" id="email" value=""> 
       <label for="password" class="required">Password</label> 
       <input type="password" name="password" id="password" value=""> 
      </div> 
      <div style="text-align: right"> 
       <input type="submit" name="submit" id="submit" value="Login" class="submit"> 
      </form> 
     </div> 
    </div> 
</body> 
</html>

_{Примечание: стиль линии я мог быть преобразован в CSS class вместо этого. Я также добавил правило для label, поэтому он выглядит немного более стильно.}

источник

2012-01-12 00:03:05 stealthyninja

Если я не ошибаюсь, вы хотите, чтобы кнопка отправки внутри границы, то http://jsfiddle.net/bTp2K/1/

<html> 
<head> 
    <style type="text/css"> 
     #left-col { 
      width: 290px; 
     } 
     #loginForm { 
      border: 1px solid black; 
     } 
     #submit { 
      /* float: right; */ 
     } 

    </style> 
</head> 
<body> 
    <div id="left-col"> 
     <div id="loginForm"> 
      <form id="user-login-form" enctype="application/x-www-form-urlencoded" method="post" action=""> 
       <label for="email" class="required">Email</label> 
       <input type="text" name="email" id="email" value=""> 
       <label for="password" class="required">Password</label> 
       <input type="password" name="password" id="password" value=""> 
      </div> 
       <div style="text-align: right"> 
       <input type="submit" name="submit" id="submit" value="Login" class="submit"> 
      </form> 
     </div> 
    </div> 
</body> 
</html>

источник

2012-01-12 00:04:55 chchrist

Чтобы сделать форму (или любой другой элемент) расширить, чтобы содержать внутренние поплавки, применять «переполнение: авто» стиль, в соответствии с последним абзацем 10.6.7 of the CCS 2.1 spec:

Кроме того, если элемент имеет какие-либо плавающие потомки которых нижний край поля ниже нижнего края содержимого элемента, то высота увеличивается включать т шланга. Учитываются только плавающие, участвующие в контексте форматирования этого блока, например, плавающие внутри абсолютно позиционированных потомков или других поплавков.

Согласно разделу 10.6.6. из той же спецификации, помимо всего прочего, это относится к:

Блока уровня, незамещаемые элементы в нормальном потоке, когда «переполнение» не рассчитывает на «видимый» (за исключением, если значение «перелив» имуществом был распространен в окне просмотра).

источник

2012-05-14 07:25:28

-1

[type=submit]{ 

    margin-left: 121px; 
    margin-top: 19px; 
    width: 84px; 
    height: 40px; 
    font-size:14px; 
    font-weight:700; 

}

источник

2015-04-23 12:06:30

Хотя этот ответ, вероятно, правильный и полезный, рекомендуется включать некоторые объяснения вдоль с этим объяснить, как это помогает решить проблему. Это становится особенно полезным в будущем, если есть изменения (возможно, не связанные), которые заставляют его перестать работать, и пользователи должны понимать, как он работал. –

Как правильно выравнивать эту кнопку отправки?

ответ

Смежные вопросы