html – 如何在另一个元素中分组时并排排列图像而没有间距

概述我试图将这些图像并排排列.不幸的是,图像之间存在明显的差距. 如何在不改变单击我的无线电图像时出现图像的功能的情况下摆脱它？ 我已经尝试将图像浮动到左侧但不幸的是,这不起作用 HTML： <div class="buttons"><input type="radio" name="a" value="1.0" id="b" /><label for="b"><img id="img1" src 我试图将这些图像并排排列.不幸的是,图像之间存在明显的差距.

如何在不改变单击我的无线电图像时出现图像的功能的情况下摆脱它？

我已经尝试将图像浮动到左侧但不幸的是,这不起作用

HTML：

<div ><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/

@R_419_6120@ 标签是内联元素.这意味着它们将从页面的角度显示,就像“字母”一样.

在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 ><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,#img5 {  wIDth: 100px;  height:100px;}

<div ><!----><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,#img5 {  wIDth: 100px;  height:100px;}input[type="radio"] + label {  float: left;}

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

使那些讨厌的空间有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,#img5 {  wIDth: 100px;  height:100px; }.buttons {  Font-size: 0;}.buttons>* {  Font-size: 1em;}

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

总结

以上是内存溢出为你收集整理的html – 如何在另一个元素中分组时并排排列图像而没有间距全部内容，希望文章能够帮你解决html – 如何在另一个元素中分组时并排排列图像而没有间距所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。