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