忙于一个涉及按钮的游戏。关于我偶然发现的问题有 2 个问题。
代码:
input {
background-color: #e7e7e7;
border: solid;
border-width: 1px;
text-align: center;
height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
}<html>
<head>
</head>
<body>
<input type="button" value="foo">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</body>
</html>问题:
当我在按钮中输入一个值时，为什么按钮不对齐？开发工具还说它仍然是相同的大小(50px 50px)那么为什么它改变了位置？
如何设置 CSS 样式，使按钮之间的距离为零(换句话说:按钮的边界接触)。我已经尝试设置 html/body/input 的填充/边距，但这些似乎都不起作用。
最佳答案
为什么带有文字的按钮会被按下？
所以这里有点作用。默认情况下，文本和内联元素与基线 垂直对齐。基线是由元素的 line-height 确定的值，尽管没有 line-height 的元素将确定一个“合理的”值[1] - 在空元素的情况下，这将为 0。但是，当您添加文本时，该元素将被赋予 line-height 并向下移动该量。 [2]
一个简单的解决方案是通过应用 vertical-align: top 强制输入以相同的对齐方式呈现，无论文本与否。
为什么按钮之间有空格？
内联 元素(和 inline-block 元素，如您的输入)将自然地并排对齐，但它们的行为类似于文本[3] 。就像您在 HTML 中的两个字母之间放置一个换行符一样，inline 元素之间的换行符会在它们之间添加一个空格。
假设，如果您将所有输入放在一行中(没有空格)，它将解决您的问题:
<input type="button" value="these" /><input type="button" value="are" /><input type="button" value="touching" />
<br><br>
<input type="button" value="these" />
<input type="button" value="are" />
<input type="button" value="not" />虽然我不建议使用该方法 - 它仅用于演示目的。
那么解决方案是什么？
好吧，你有一些选择。选择您认为最适合您的一项。
解决方案 1: 将输入包装在容器中并对其应用 font-size: 0。空格仍会存在，但 font-size: 0 确保它们不可见。
input {
background-color: #e7e7e7;
border: solid;
border-width: 1px;
text-align: center;
height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
vertical-align: top;
font-size: 12px;
}
.container {
font-size: 0;
}<div class="container">
<input type="button" value="foo">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</div>解决方案 2:绕过 inline 元素的琐碎性并利用 display: block 和 float .
input {
background-color: #e7e7e7;
border: solid;
border-width: 1px;
text-align: center;
height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
font-size: 12px;
float: left;
display: block;
}
.row {display: block;}
.row::after {
display: block;
content: '';
clear: both;
}<div class="row">
<input type="button" value="foo">
<input type="button" value="">
<input type="button" value="">
</div>
<div class="row">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</div>
<div class="row">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</div>解决方案 3:使用更现代的方法，例如 flexbox .
input {
background-color: #e7e7e7;
border: solid;
border-width: 1px;
text-align: center;
height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
vertical-align: top;
font-size: 12px;
}
.container {
display: flex;
flex-wrap: wrap;
width: 150px;
}<div class="container">
<input type="button" value="foo">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</div>来源
1:"normal: Tells user agents to set the computed value to a "reasonable" value"
关于HTML 输入对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46456683/