3

Gostaria de alinhar a minha label com o checkbox usando CSS, de modo que a label não fique em baixo do checkbox. Segue um print de como eu gostaria que ficasse: inserir a descrição da imagem aqui

O meu está ficando assim:

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>

3
  • 1
    Isso é bem chatinho de fazer... O mais fácil é declarar uma div pro box e outra pro texto e alinhar as duas por porcentagem. Mas muito cuidado na responsividade. Commented 29/06/2017 às 18:51
  • 1
    Se estiver usando o bootstrap, ele faz isso pra você automaticamente. Commented 29/06/2017 às 18:52
  • 1
    Eu ia propor uma resposta, há muita regra para algo simples. Mas a resposta já solucionou o problema, então ok. Só tome cuidado com o uso de flexbox no Internet Explorer. Veja a aba "known issues" nesse site. Commented 29/06/2017 às 21:00

2 Respostas 2

1

Basta adicionar uma div em volta do input e declarar a li com display flex, exemplo...

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>

Mas fique atento a propriedade flex, pois não é uma especificação adotada por todos os browsers

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

1
  • Valeu, Felipe. :)
    – Alineat
    Commented 29/06/2017 às 20:56
1

Para estilização de páginas existe vários frameworks front-end que te auxiliaram na produtividade. Posso afirmar que um dos principais neste aspecto é o bootstrap.

No seu código html, basta adicionar a tag:

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

Que com base na dúvida da tarefa o bootstrap já te oferece uma solução Inline checkboxes and radios.

4
  • 3
    Importar um framework só para corrigir um alinhamento? Commented 29/06/2017 às 21:02
  • Não. Adicionar um framework para ganhar em produtividade. Dê uma lida na documentação e veja o quanto ela pode te ajudar em programar em menos tempo. Sem falar que qualquer emprego hoje em dia pede conhecimento em framworks, tanto front, quando back. Enfim, profissionalmente falando, será um conhecimento que agreda valor no seu currículo.
    – DNick
    Commented 30/06/2017 às 13:12
  • 1
    Olá Djalma, não leve a mal, mas se a pessoa usar no minimo 50% do FW ok é considerado "produtivo", se ela tem uma coisa pronta e só vai importar o bootstrap para alinhar uma coisa é usar bem menos de 5%, ou seja é o mesmo que vc comprar um canhão inteiro só pra matar formigas, a não ser que ele refatore todo o site e faça um bom uso do Bootstrap, caso contrário creio ser um grande exagero. Novamente peço que não leve a mal ;)
    – Syzoth
    Commented 30/06/2017 às 15:03
  • 1
    Concordo com o seu ponto de vista @guilherme. Meu pensamento em usar o FW não foi a curto prazo como proposto na pergunta. Vocês está certo.
    – DNick
    Commented 30/06/2017 às 15:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .