Делайте кнопки, выбирайте и вводите все одинаковой высоты - PullRequest
Новая
       12

Делайте кнопки, выбирайте и вводите все одинаковой высоты

0 голосов
/ 01 мая 2018

Я пытаюсь сделать все мои элементы формы одинаковой высоты. Обычно я просто устанавливаю высоту для каждого элемента, и работа хороша! Но разработчики, с которыми я работаю, непреклонны. Я использую отступы для кнопок, если они должны быть обернуты, чтобы текст не обрезался ... по аргументу это будет проблемой, которую также нужно решить, но в любом случае. ..

Итак, у меня есть этот CodePen, показывающий все мои стили. Я включил весь CSS только в том случае, если что-то наследуется, что я пропустил. Мне удалось получить большинство из них одинаковой высоты, используя те же font-size, padding и line-height.

https://codepen.io/moy/pen/pVeOyQ

Проблема в том, что одна из кнопок не имеет border, а все остальное есть, поэтому она отключена на несколько пикселей. Я думал, что border-box решит это, но, очевидно, нет!

Я мог бы также добавить рамку к этой кнопке и всегда следить за тем, чтобы она была того же цвета, что и фон - но это немного болезненно. Это единственный способ?

Я знаю, что это небольшая / простая проблема, но я просто хочу получить отзывы, прежде чем принимать решение.

Я включил CodePen, так как не смог встроить весь CSS, так как он превысил предел. Также я не мог получить все элементы горизонтально встроенными в код для встраивания, так как места было недостаточно.

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

Я мог бы также добавить рамку к этой кнопке и всегда следить за тем, чтобы она была того же цвета, что и фон, но это немного болезненно. Это единственный способ?

Вместо этого вы можете добавить прозрачную рамку, как показано во фрагменте ниже. 

input, select, button {
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;

    padding: 15px;
    border: 1px solid #1111;
    margin: 0;
  }

  #transparent-border {
    border: 1px solid transparent;
  }

  #no-border {
    border: none;
  }
<p>How it looks <i>with</i> the transparent border</p>

<input type="text" name="" placeholder="Input field">

<select class="" name="">
  <option value="Select">Select field</option>
</select>

<button type="button" name="button">Button</button>

<button id="transparent-border" type="button" name="button">Button with transparent border</button>

<p>How it looks <i>without</i> the transparent border</p>

<button type="button" name="button">Border</button>

<button type="button" id="no-border" name="button">No border</button>

<p>Comparison</p>

<button type="button" id="no-border" name="button">No border</button>

<button id="transparent-border" type="button" name="button">Button with transparent border</button>
0 голосов
/ 01 мая 2018

Как насчет установки минимальной высоты для всех ваших элементов? В сочетании с проклейкой: бордюр;

...