CSS:按钮/链接没有正确排列--是溢出的问题吗？
CSS:按钮/链接没有正确排列--是溢出的问题吗？
提问于 2019-06-05 08:51:25
我正在做一个项目，在这个项目中，一个按钮和一个链接(样式是彼此无法区分的)需要排成一行。由于某些原因，我的“注销”按钮与我的“发送”按钮不一致。经过一些实验，我发现更改"overflow“属性似乎会稍微否定这种效果。但我仍然没有让它百分之百正常工作。有谁能给我指点一下发生了什么吗？
.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
Stack Overflow用户
发布于 2019-06-05 09:06:38
我推荐使用vertical-align:top。参见vertical-align。
默认值是baseline，这就是您所注意到的。
请参阅What's the deal with vertical-align: baseline?
我还建议使用padding而不是height。
submit按钮中的文本垂直居中，而<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56452990
复制相关文章
相似问题