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

Question

Я столкнулся со следующей проблемой в 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 для демонстрации.

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

Как сделать так, чтобы ссылка и кнопка ввода были одинаковой высоты? Это что-то очевидное, что я пропустил?Есть ли хитрость CSS, чтобы они были одинаковой высоты?

Answer 1

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

Твердым решением является размещение кнопки внутри ссылки. Скрипка: 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 есть пробел.

Answer 2

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

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

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

Answer 3

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

Answer 4

Помимо ответа Тома, важным стилем, который трудно найти, является

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

Answer 5

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

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

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

Дополнительные у меня были: поле, граница, отступы, ширина