我试图将这些图像并排排列.不幸的是,图像之间存在明显的差距.
如何在不改变单击我的无线电图像时出现图像的功能的情况下摆脱它？
我已经尝试将图像浮动到左侧但不幸的是,这不起作用
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 }
小提琴：
解决方法
标签是内联元素.这意味着它们将从页面的角度显示,就像“字母”一样.
在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,#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,#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
使那些讨厌的空间有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 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>
