Получение кнопки <input> и <a>для равного размера в HTML

Я столкнулся со следующей проблемой в HTML/CSS: для моего (автономного) сайта есть ссылка и кнопка отправки (которая находится внутри формы) рядом друг с другом, например:

<a href='settings.php' class='button'>Settings </a>

<form action='processing/logout.php' method='POST' class='inline'>
    <input type='submit' value='Sign out' class='redbutton'>
</form>

Когда оба элемента являются связями, они прекрасно выравниваются рядом друг с другом. Однако теперь, хотя ссылка и кнопка имеют одинаковую стилизацию CSS, связанную с ними, кнопка ввода досадно больше (по высоте), чем ссылка (хотя она едва заметна при просмотре).

Я создал jsFiddle для демонстрации.

Люди на других форумах просили reset CSS, поэтому я включил это также, даже если удаление этого не устраняет проблему.

Как я могу получить ссылку и кнопку ввода одинаковой высоты? Является ли это очевидным, что я пропустил? Есть ли трюк CSS, чтобы они были одинаковой высоты?

Ответ 1

Размер элемента привязки (встроенного) обрабатывается непоследовательно в разных браузерах.

Твердое решение - разместить кнопку внутри ссылки. Fiddle: http://jsfiddle.net/m5m5M/22/.

<a href='settings.php'><input type='button' class='button' value='Settings' /></a><form action='processing/logout.php' method='POST' class='inline'><input type='submit' value='Sign out' class='redbutton'>
<form>

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

Ответ 2

Использование display: inline-block в вашем классе button должно сделать трюк. http://jsfiddle.net/VB9RM/17/

Ответ 3

Это 2015 год, и вы по-прежнему не можете создать ссылку, чтобы выглядеть как кнопка каждый раз (по крайней мере, в Firefox). Лучший способ - дать обе эти стили:

box-sizing, vertical-align, padding, font-size, line-height

но если вы установите высоту в auto (или оставьте значение по умолчанию), она все равно не будет соответствовать. Таким образом, вам нужно значение auto для высоты - лучший метод Rob W.

Ответ 4

Была та же проблема. Ответ Том помог мне.

Пришлось добавить:

box-sizing: border-box;
font-size: 15px;
font-family: "DejaVu Serif";

Дополнительно я имел: margin, border, padding, width

Ответ 5

На вершине ответа Тома важный труд, который трудно найти, -

button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {  
  padding: 0; 
  border: 0;
}