分组在另一个元素中时如何对齐图像而没有间距

billy 发表于 Dev

比利

我正在尝试将这些图像并排对齐。不幸的是，图像之间存在可见的间隙。

在单击无线电图像时，如何在不更改功能的情况下摆脱它？

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

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
}

小提琴：

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

人

labels是内联元素。这意味着它们将从页面的角度显示，就像显示“字母”一样。

在中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`一个`font-size`的`0`

使那些讨厌的空间具有0×0 px。但是，如果您在中渲染了文本.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。