CSS: кнопка / ссылка неправильно выстраиваются - проблема с переполнением? - PullRequest
Новая
       15

CSS: кнопка / ссылка неправильно выстраиваются - проблема с переполнением?

1 голос
/ 05 июня 2019

Я работаю над проектом, в котором кнопка и ссылка (стилизованные так, чтобы они не отличались друг от друга) должны располагаться в ряд.По какой-то причине моя кнопка «Выход» не совпадает с моей кнопкой «Отправить».После небольшого количества экспериментов я обнаружил, что изменение свойства «переполнения», кажется, немного сводит на нет этот эффект.Но я до сих пор не получил его на 100%.Кто-нибудь может дать мне какие-нибудь указания на то, что происходит? 

.send-or-logout { 
	text-align: center; 
	background-color: #fa913c;
}

.blue-button, .red-button  {
	border: none;
	margin: 10px;
	width: 200px;
	height: 50px;
	overflow: auto;
  white-space: nowrap; 
	text-overflow: ellipsis;
	overflow-wrap: break-word;
	font-size: 25px;
	text-transform: uppercase;
	color: #fafafa;
	border: 0;
	text-align: center;
}

.blue-button {
	background-color:#273557;
	display: inline-block;
}

.red-button {
	background-color: #f4440e;
	display: inline-block;
}
 <div class="container">
   <div class="row">
        <div class="col send-or-logout">
            <input class="blue-button"type="submit" name="submit" value="SEND" /><a
                href="./logout" class="red-button logout-button">LOGOUT</a>
        </div>
    </div>

1 Ответ

0 голосов
/ 05 июня 2019

Я рекомендую использовать vertical-align:top. См. вертикальное выравнивание .

Значением по умолчанию является baseline, это то, что вы заметили.
См. Что такое вертикальное выравнивание: базовая линия?

Я также предлагаю использовать padding вместо height.
Текст в кнопках отправки расположен по центру по вертикали, а текст в элементах <a> - нет. 

.send-or-logout {
  text-align: center;
  background-color: #fa913c;
}

.blue-button,
.red-button {
  display: inline-block;
  vertical-align: top;
  border: none;
  width: 200px;
  margin: 10px;
  padding: 0.5em 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  font-size: 25px;
  color: #fafafa;
  cursor: pointer;
}

.blue-button {
  background-color: #273557;
}

.red-button {
  background-color: #f4440e;
}
<div class="container">
  <div class="row">
    <div class="col send-or-logout">
      <input class="blue-button" type="submit" name="submit" value="SEND" /><a href="./logout" class="red-button logout-button">LOGOUT</a>
    </div>
  </div>
...