logo标签列表

HTML输入框对齐

htmlcss
4

我正在忙于一个涉及按钮的游戏。我遇到了两个问题需要解决。

代码：

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>

问题：

  1. 当我在按钮中输入值时，为什么按钮会错位？开发工具也显示它仍然是相同的大小（50px×50px），所以为什么它会改变位置？

  2. 如何设置 CSS 样式，使得两个按钮之间的距离为零（换句话说：按钮的边框相接）？我已经尝试过将 html/body/input 的 padding/margin 设置为零，但这些都似乎不起作用。

这是一个好问题，点个赞！先试一下。 - Carson
如果你将它们分组（在三个div下）并应用float:left，确保清除每个浮动，效果可能会更好。 - pro
3个回答
3

为什么带文字的按钮会被按下？

这里有一些因素在起作用。文本和行内元素默认垂直对齐到基线。基线是一个由元素的line-height决定的值，没有line-height的元素将确定一个“合理”的值[1]。在空元素的情况下，这个值将为0。但当你添加文本时，元素就会获得一个line-height并向下移动相应的距离。[2]

一个简单的解决方案是通过应用vertical-align: top来强制使输入框以相同的对齐方式呈现，无论是否有文本。

为什么按钮之间会有空格？

行内元素（以及像您的输入框一样的inline-block元素）将自然地侧-by-side对齐，但它们的行为类似于文本[3]。就像如果你在HTML中的两个字母之间放置一个换行符一样，行内元素之间的换行符将在它们之间添加一个空格。

假设你把所有的输入框都放在一行上（没有空格），那么它就可以解决你的问题:

<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: 告诉浏览器将计算值设置为“合理”的值"

2: "对于内联非替换元素，用于对齐的框是高度为'line-height'的框。

3: "内联级别元素生成内联级别框，这些框参与内联格式上下文。"

@Santi，你能给我更多的解释吗？我正在努力理解你的答案。在我看来，如果我设置vertical-align:*，它们应该有一些位置，但为什么较少的vertical-align:方法起作用呢？ - Carson
@Carson vertical-align 指定了项目或文本在其容器内的对齐方式，它仅适用于 inline 和 table 元素。像 <div> 这样的元素设置 vertical-align 将不起作用，因为 <div> 是一个 block 元素。我已经编辑了我的答案，提供了替代方案以及更多的解释。你可以在这里阅读更多关于vertical-align的信息（并查看一些有用的可视化图）。 - Tyler Roper
@Santi 我已经阅读了你的链接，我知道它只适用于内联或表格元素，我的问题是为什么 vertical-align: baseline 不起作用。英语不是我的母语，也许我没有理解你的话 - Carson
1

"当我在按钮中输入值时，为什么按钮会对不齐？"

具有文本内容的元素的默认值 vertical-align 是基线，因此您需要指定它（在我的情况下，我使用 vertical-align: middle）。

"如何设置 CSS 样式以使按钮之间的距离为零（换句话说：按钮的边框相互接触）"

我采用了一种简单的方法，通过设置负的 margin-left 值来获得没有空间间隔的按钮。我使用 input:nth-child(2n) 和 input:nth-child(4n - 1) 选择器选择特定的项目，并给它们赋予 margin-left: -4px;。

这是我的解决方案：

* {
  margin: 0;
  padding: 0;
}

input {
  background-color: #e7e7e7;
  border: solid;
  border-width: 1px;
  text-align: center;
  height:50px;
  width:50px;
  vertical-align: middle
}

input:nth-child(2n) {
  margin-left: -4px;
}

input:nth-child(4n - 1) {
  margin-left: -4px;
}
<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>

请随意提问，如果有任何不清楚的地方！
我稍后会添加解释 - P.S.
@j08691，我已经添加了一个解释。 - P.S.
2
@j08691 不是我 - 我已经点赞了，因为解释被添加了。 - Tyler Roper
0
对于问题二，您可以尝试使用border-spacing方法。
例如：
input {
    border-collapse: separate;
    border-spacing: 0px 0px;
}
1
border-spacing和border-collapse仅适用于table和inline-table元素。 - Tyler Roper
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接