How to align a checkbox next to a label?

Asked

Viewed 2,990 times

2

I would like to align my label with the checkbox using CSS, so that the label does not get below the checkbox. Here’s a print of how I’d like it to look: inserir a descrição da imagem aqui

Mine is getting like this:

inserir a descrição da imagem aqui

body {
    display: flex;
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}




section#principal {
    width: 100%;
}

section#principal .modulo .container {
    height: ;
    padding: 20px;
}

section#principal .modulo .container .canvas {
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    padding: 20px;
}

form ul {
    padding: 0; margin: 0;
    margin-bottom: 30px;
}

form li {
    list-style: none;
    margin-bottom: 10px;
}

form h2 {
    font-size: 20px;
    color: #161616;
    padding: 0; margin: 0;
    margin-bottom: 20px;
}

.confirmacoes li {
    font-size: 14px;
    display: block;
    width: 400px;
}

.confirmacoes input {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
    position: relative;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Projeto 008</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="estilo.css">
    <script src="https://use.fontawesome.com/e0e1b97932.js"></script>
    <meta name="viewport" content="width:device-width, initial-scale=1">

</head>

<body>                        
 
 <section id="principal">
    
     <div class="modulo">
          
        <div class="container">
            <div class="canvas">
                
                <form action="">                     
                                      
                    <h2>Anythings</h2>
                    <ul class="confirmacoes">
                        <li>
                            <input type="checkbox">
                            <label>Güncelleme ve yenilikleri mail olarak almak istiyorum.</label>
                        </li>
                        <li>
                            <input type="checkbox">
                            <label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id nisl eget nunc molestie maximus.</label>
                        </li>
                    </ul>
                                       
                </form>
                
            </div>
        </div>
        
     </div>
     
 </section>
                   
</body>
</html>

html5 checkbox label alignment
  • 1

    This is very boring to do... The easiest thing is to declare a div pro box and another pro text and align the two by percentage. But be very careful in responsiveness.

  • 1

    If you are using the bootstrap, it does this to you automatically.

  • 1

    I was going to propose an answer, there is a lot of rule for something simple. But the answer has solved the problem, so ok. Just be careful about using flexbox in Internet Explorer. See the "known issues tab" on that website.

2 answers

1


Just add a div around the input and declare the li with flex display, example...

body {
    display: flex;
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}




section#principal {
    width: 100%;
}

section#principal .modulo .container {
    height: ;
    padding: 20px;
}

section#principal .modulo .container .canvas {
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    padding: 20px;
}

form ul {
    padding: 0; margin: 0;
    margin-bottom: 30px;
    display: block;
}

form li {
    list-style: none;
    margin-bottom: 10px;
}

form h2 {
    font-size: 20px;
    color: #161616;
    padding: 0; margin: 0;
    margin-bottom: 20px;
}

.confirmacoes li {
    font-size: 14px;
    display: flex;
}

.confirmacoes input {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    position: relative;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Projeto 008</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="estilo.css">
    <script src="https://use.fontawesome.com/e0e1b97932.js"></script>
    <meta name="viewport" content="width:device-width, initial-scale=1">

</head>

<body>                        
 
 <section id="principal">
    
     <div class="modulo">
          
        <div class="container">
            <div class="canvas">
                
                <form action="">                     
                                      
                    <h2>Anythings</h2>
                    <ul class="confirmacoes">
                        <li>
                            <div>
                                <input type="checkbox">
                            </div>
                            <label>Güncelleme ve yenilikleri mail olarak almak istiyorum.</label>
                        </li>
                        <li>
                            <div>
                                <input type="checkbox">
                            </div>
                            <label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id nisl eget nunc molestie maximus.</label>
                        </li>
                    </ul>
                                       
                </form>
                
            </div>
        </div>
        
     </div>
     
 </section>
                   
</body>
</html>

But stay tuned to flex property as it is not a specification adopted by all browsers

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  • Valeu, Felipe. :)

1

For page stylization there are several frameworks front-end that helped you in productivity. I can say that one of the main ones in this aspect is the bootstrap.

In your code html, just add the tag:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

That based on the doubt of the task bootstrap already offers you a solution Inline checkboxes and radios.

  • 3

    Import a framework just to fix an alignment?

  • No. Add a framework to gain in productivity. Take a look at the documentation and see how much it can help you program in less time. Not to mention that any job nowadays calls for knowledge in framworks, so much front, when back. Finally, professionally speaking, it will be a knowledge that brings value to your resume.

  • 1

    Hello Djalma, don’t take this the wrong way, but if the person uses at least 50% of the FW ok is considered "productive", if she has something ready and will only import the bootstrap to align one thing is to use well less than 5%, ie it is the same as you buy a whole cannon just to kill ants, unless he refactates the entire site and makes good use of Bootstrap, otherwise I think it’s a big exaggeration. Again I ask you not to take it amiss ;)

  • 1

    I agree with your point of view @Uilherme. My thoughts on using the FW was not in the short term as proposed in the question. You are right.

Browser other questions tagged html5 checkbox label alignment

You are not signed in. Login or sign up in order to post.