gpt4 book ai didi

html - 无边距对齐按钮

转载 作者:太空宇宙 更新时间:2023-11-03 21:58:23 24 4
gpt4 key购买 nike

我想垂直对齐两个具有定义大小的图像按钮,它们之间没有任何空格(边距)

我试图将边距设置为0,但空间仍然存在

<html>  
<head>
<title>Test</title>

<style>
.test {
width:0.8em;
height:0.5em;
margin:0px;
border:1px solid black;
background-repeat:no-repeat;
background-position:center;
visibility:visible;
}
</style>
</head>

<body>
<form>
<div style="border:1px solid black; display:inline-block;">
<input class="test" style="background-image:url(arrow_up.png)" type="button" value="^">
<br>
<input class="test" style="background-image:url(arrow_down.png)" type="button" value="v">
</div>
</form>
</body>
</html>

看起来像这样,但应该像这样

    +-+              +-+
|^| |^|
| | => |v|
|v| +-+
| |
+-+

你知道我需要设置哪个属性来消除边距吗?

编辑(答案):好的,所以display:block;的组合并删除 <br>做我想做的事感谢大家

最佳答案

尝试使它们(输入)成为 block 元素,默认情况下它们是内联元素并且可能提供一些空格。

演示:http://jsfiddle.net/2YNTk/1/ , http://jsfiddle.net/2YNTk/2/ (带有 br 标签)

关于html - 无边距对齐按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12192080/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com