显示没有空格的缩略图的最简单方法

Question

我正在尝试以棋盘方式无缝地显示图像。所有图像大小相同。似乎无法消除行之间的间距。

总体目标是紧凑的代码。

这是原始代码。

<?php build();

function build(){
for($x=1;$x<=11;$x++){
for($y=1;$y<=11;$y++){
?><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><?php }}}?>

这是我在尝试其他几项消除间距之后所拥有的。

<?php build();

function build(){
for($x=1;$x<=11;$x++){
?><div style="clear:left; float:left;"><?php
for($y=1;$y<=11;$y++){
?><form action="$_SERVER['PHP_SELF']"
><input type="image" name="data" value="var" src="images/blue.png"></form
><?php }?></div><?php }}?>

每个请求，html翻译..（值更改为3以减少长度。）

<form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form>

这是最终起作用的。它现在有效，因为所有输入都被归为一种形式。

<?php solutionbuild();

function solutionbuild(){
for($x=1;$x<=11;$x++){
?><form method="POST" action="<?php $_SERVER['PHP_SELF'] ?>"><div style="clear:left; float:left;"><?php
for($y=1;$y<=11;$y++){
?><input type="image" name="data" value="9" src="images/green.png"><?php
}?></div><?php }}?>

html版本（yikes）

<form method="POST" action=""><div style="clear:left; float:left;"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"></div><form method="POST" action=""><div style="clear:left; float:left;"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"></div><form method="POST" action=""><div style="clear:left; float:left;"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"></div>

我不确切地知道为什么表单的合并消除了间距问题。如果有人知道，请告诉我。感谢

Answer 1

您在图片下方看到的空间是因为它们是内联元素。内联元素包括文本中下划线的空间，如小写字母 j 和 g 。

将图像输入浮动或设置为显示块以移除此额外空间。

修改

不确定为什么要为每个图像输入使用表单。我会在整个事情周围包裹一个表格标签（也就是说，没有进一步的信息）所以我把它们排除了。

以下是一个例子：

.no-float,
.float {
  margin: 25px 0;
}
.float input {
  float: left;
}
.float .row {
  clear: left;
}

<!-- Non floated inputs (has spaces) -->
<div class="no-float">
  <div class="row">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
  </div>
  <div class="row">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
  </div>
  <div class="row">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
  </div>
</div>

<!-- floated inputs (no spaces) -->
<div class="float">
  <div class="row">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
  </div>
  <div class="row">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
  </div>
  <div class="row">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
    <input type="image" src="http://lorempixel.com/30/30/abstract/">
  </div>
</div>