Menu
Hi Guys.
I’ve tryed many forms to do it, but i can’t do it.
I just need to put a text below of five images, like: “1 – so angry”, “2 – bad”, etc. But when i put a broken line
“<br>” my layout misalign, because i need to put two images on the same line
and in my .css i have: display: inline-block.
Example of i need:
when i put <p> </p> it broke two lines and misalign everything.
I need 2 images by line.
My code in html is:
[code]
<fieldset class=”radio-image”>
<label for=”1 – so angry”>
<input type=”radio” name=”qualifica” id=”1 – so angry” value=”1 – so angry” required>
<img src=”imagens/note1.png”><b>1 – so angry</b></label>
<label for=”2 – bad”>
<input type=”radio” name=”qualifica” id=”2 – bad” value=”2 – bad” required>
<img src=”imagens/note2.png”><b>2 – bad</b></label>
<label for=”3 – kind of”>
<input type=”radio” name=”qualifica” id=”3 – kind of” value=”3 – kind of” required>
<img src=”imagens/note3.png”><b>3 – kind of</b></label>
<label for=”4 – good”>
<input type=”radio” name=”qualifica” id=”4 – good” value=”4 – good” required>
<img src=”imagens/note4.png”><b>4 – good</b></label>
<label for=”5 – very good”>
<input type=”radio” name=”qualifica” id=”5 – very good” value=”5 – very good” required>
<img src=”imagens/note5.png”><b>5 – very good</b></label>
</fieldset><br>
My code in .css is:
[code]
.radio-image label > input{
visibility: hidden;
}
.radio-image label > input + img{
width: 30%;
display: inline-block;
cursor:pointer;
border:4px solid #EEE;
border-radius:15px;
padding:10px;
}
.radio-image label > input:checked + img{
border:4px solid #3F51B5;
}
Can anyone help me? Thanks a lot.