html - 如何在另一个元素中分组时并排对齐图像而不留间距

Question

我正在尝试并排对齐这些图像。不幸的是，图像之间存在明显的差距。

如何在不更改单击 radio 图像时显示图像的功能的情况下摆脱它？

我试过将图像向左浮动，但不幸的是这不起作用

HTML:

<div class="buttons">
<input type="radio" name="a" value="1.0" id="b" />
<label for="b"><img id="img1" src="mypicone.png"></label>

<input type="radio" name="a" value="2.0" id="c" />
<label for="c"><img id="img3" src="mypictwo.png"></label>

<input type="radio" name="a" value="3.0" id="d" />
<label for="d"><img id="img5" src="mypicthree.png"></label>
</div>

CSS:

input[type="radio"] {
 display: none;
}
input[type="radio"]:checked + label {
 position: relative
}
input[type="radio"]:checked + label::before {
content: url("//lorempixel.com/10/10");
position: absolute;
left: 15px
}

fiddle :

https://jsfiddle.net/emeka/qbukpfn5/1/

Answer 1

label 是行内元素。这意味着从页面的 Angular 来看，它们将像“字母”一样显示。

在 HTML 中，如果您在每行上放一个字母并且父级正常换行，则新行将被浏览器呈现为空格。它们是“智能”空间，因为只有两个或多个后续此类空间中的一个会被渲染。

基本上，这就是标签之间的新行发生的情况。它们呈现为空格。要修复它，您有以下三种选择:

1。删除元素之间的所有空格/换行符

body {margin: 0;}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  position: relative
}
input[type="radio"]:checked + label::before {
  content: url("http:://lorempixel.com/10/10");
  position: absolute;
  left: 15px
}
#img1, #img3, #img5 {
  width: 100px;
  height:100px;
}

<div class="buttons"><input type="radio" name="a" value="1.0" id="b" /><label for="b"><img id="img1" src="http://lorempixel.com/10/10"></label><input type="radio" name="a" value="2.0" id="c" /><label for="c"><img id="img3" src="http://lorempixel.com/10/10"></label><input type="radio" name="a" value="3.0" id="d" /><label for="d"><img id="img5" src="http://lorempixel.com/10/10"></label></div>

或者，您可以只注释那些空格/换行符:

body {margin: 0;}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  position: relative
}
input[type="radio"]:checked + label::before {
  content: url("http:://lorempixel.com/10/10");
  position: absolute;
  left: 15px
}
#img1, #img3, #img5 {
  width: 100px;
  height:100px;
}

<div class="buttons"><!--
--><input type="radio" name="a" value="1.0" id="b" /><!--
--><label for="b"><img id="img1" src="http://lorempixel.com/10/10"></label><!--

--><input type="radio" name="a" value="2.0" id="c" /><!--
--><label for="c"><img id="img3" src="http://lorempixel.com/10/10"></label><!--

--><input type="radio" name="a" value="3.0" id="d" /><!--
--><label for="d"><img id="img5" src="http://lorempixel.com/10/10"></label><!--
--></div>

2。将标签向左浮动

这不会删除空格，但会将粘在左侧的标签分组。空格仍然在标签之后呈现:

input[type="radio"] + label {
    float: left;
}

body {margin: 0;}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  position: relative
}
input[type="radio"]:checked + label::before {
  content: url("http:://lorempixel.com/10/10");
  position: absolute;
  left: 15px
}
#img1, #img3, #img5 {
  width: 100px;
  height:100px;
}
input[type="radio"] + label {
  float: left;
}

<div class="buttons">
<input type="radio" name="a" value="1.0" id="b" />
<label for="b"><img id="img1" src="http://lorempixel.com/10/10"></label>

<input type="radio" name="a" value="2.0" id="c" />
<label for="c"><img id="img3" src="http://lorempixel.com/10/10"></label>

<input type="radio" name="a" value="3.0" id="d" />
<label for="d"><img id="img5" src="http://lorempixel.com/10/10"></label>
</div>

已更新 fiddle

3。或者，您可以只给 .buttons 0

的 font-size

使那些讨厌的空间具有 0 × 0 像素。但是，如果您在 .buttons 中呈现文本，则应为 .buttons 的直接子级提供“正常”字体大小:

.buttons {
  font-size: 0;
}
.buttons>* {
  font-size: 1em;
}

body { margin: 0; }
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  position: relative
}
input[type="radio"]:checked + label::before {
  content: url("http:://lorempixel.com/10/10");
  position: absolute;
  left: 15px
}
#img1, #img3, #img5 {
  width: 100px;
  height:100px;
 }
.buttons {
  font-size: 0;
}
.buttons>* {
  font-size: 1em;
}

<div class="buttons">
<input type="radio" name="a" value="1.0" id="b" />
<label for="b"><img id="img1" src="http://lorempixel.com/10/10"></label>

<input type="radio" name="a" value="2.0" id="c" />
<label for="c"><img id="img3" src="http://lorempixel.com/10/10"></label>

<input type="radio" name="a" value="3.0" id="d" />
<label for="d"><img id="img5" src="http://lorempixel.com/10/10"></label>
</div>