Geek Answers Handbook

How to align images side by side without spacing when grouping in another element

I am trying to align these images side by side. Unfortunately, there is a visible gap between the images.

How can I get rid of it without changing the functionality when I click on my radio images, the image appears?

I tried to float the images on the left, but unfortunately this does not work.

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
}

Violin:

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

+4
source share
3 answers

labelare built-in elements. This means that they will be displayed from the point of view of the page in the same way as "letter".

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 a font-size 0

0 & times; 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>
+3

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

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

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

CSS

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
}
#img2, #img4, #img6 {
width: 100px;
height: 100px;
}
#img1 {float: left}
#img3 {float: left}
#img5 {float: left}

:

https://jsfiddle.net/qbukpfn5/3/

0

add to your CSS:

label {
 position: relative;
}

label[for="c"] {
 left: -4px; 
}

label[for="d"]
{
 left: -8px
}
0
source

More articles:


All Articles