我正在做一个项目,其中一个按钮和一个链接(样式彼此之间很难区分)需要排成一行。由于某些原因,我的“注销”按钮与我的“发送”按钮不对齐。经过一番试验,我发现更改“ 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>

最佳答案

我建议使用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>

关于html - CSS:按钮/链接未正确排列-溢出是否存在问题?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56452990/

10-12 12:24
查看更多