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

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 版本(哎呀)

<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。

将您的图像输入 float 到或将它们设置为显示 block 以删除此额外空间。

编辑

不确定为什么要为每个图像输入使用一个表单。我自己会用一个表单标签将整个内容包裹起来(也就是说，没有进一步的信息)，所以我将它们排除在外。

这是一个例子:

.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>