![](/img/trans.png)
[英]To align two text boxes and one search button on the right and in a single line
[英]Align href button and an image button in a single line
我在div
内的 html 中定义了以下 2 个按钮:
<div class="button-div" align="center">
<a id="cancel" style="background-color: #4b82c3;color: white;display:inline;text-decoration: none !important; font-size: 12px; padding: 10px 11px;margin: 8px 0;border: 1px;border-radius: 20px;" href="/">Cancel</a>
<input type="image" id="btn" src="/static/images/submit-button.png" value="Submit" alt="Submit" width="90" height="40">
</div>
不知何故,使用a tag
创建的按钮与定义为图像的按钮不对齐。 如何将这些按钮对齐?
PS:如果两个按钮都定义为图像,我不会遇到这个问题。
尝试使用display:flex
与flex-direction: row
:
<div class="button-div foo" align="center">
</div>
CSS:
.foo {
display: flex;
flex-direction: row;
}
使用 css flex 属性将元素对齐在一行中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.