Question

我正在一个项目中，一个按钮和一个链接（样式被定义为彼此难以区分）需要连续排列。由于某些原因，我的“注销”按钮与我的“发送”按钮不对齐。经过一些试验，我发现更改“ overflow”属性似乎可以使这种效果有所抵消。但是我仍然没有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>

Answer 1

我建议使用vertical-align:top。参见vertical-align。

您要注意的默认值为baseline。
参见What's the deal with vertical-align: 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>

CSS：按钮/链接未正确排列-溢出是否有问题？

1 个答案: