Jump to content
adavis

ajuda com alinhamento inout text

Recommended Posts

Boa noite,

gostaria da ajuda de vocês.

Como alinhar os input type text em meio ao um texto?

exe:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, input type text aqui et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu input type text aqui. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

coo fazer com que o input fique alinhado de acordo com o texto. Tentei fazer mas não consegui o input fica sempre no incio do texto.

desde ja obrigada.

Share this post


Link to post
Share on other sites

Adavis,

É só inserir a tag do input ao decorrer do texto. Talvez exista alguma classe no CSS que esteja interferindo ou até mesmo algum erro de estrutura no HTML.

Veja um código de exemplo:

<p>Lorem ipsum dolor sit amet, <input type="text" placeholder="consectetur"> adipisicing elit. Magni, nihil odio earum. Saepe quia cum quasi aliquam similique qui, nihil architecto hic <input type="text" placeholder="blanditiis"> labore quaerat natus, necessitatibus. Alias, corporis, optio.</p>

Veja esse código funcionando na DEMO.

Abraços!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Elisame Araújo
      Seguinte, estou criando uma página dinâmica para um site de clã de jogos e essa página vai listar todos os membros. Até aí, tudo bem, eu consegui buscar dentro do banco de dados os nomes dos membros, mas, quando preciso com que uma div que abre um lightbox com resumo do perfil do membro, acaba retornando apenas o resultado referente a primeira ID, no caso a 1. O que rola é todos os membros, ficam com a mesma informação de resumo curto e UF, por exemplo, mesmo que no banco de dados isso seja individual. Para explicar melhor:
       
      Este código, busca os membros e algumas colunas no banco de dados.
      $conecta = mysqli_connect($servidor,$usuario,$senha,$banco); if(mysqli_connect_errno()) { die("Falha ao se conectar com: " . mysqli_connect_errno()); } //Consulta Membros $membros = "SELECT m.id, m.nick, m.estado, m.idstatus, m.resumocurto, m.resumolongo, m.data_cadastro, m.canalyt, assalto, medico, suporte, atirador, pilotoaviao, tanque, pilotoheli "; $membros .= " FROM membros as m "; $membros .= " JOIN afinclasse as af "; $membros .= " on m.id = af.id "; $membros .= " where af.id and m.id "; $resultados = mysqli_query($conecta,$membros); if(!$resultados) { die("Falha na consulta de dados. A coluna da tabela selecionada não existe ou seu nome está incorreto."); } ?> Que em seguida são exibidos dentro de:
      <h3 style="margin-top: 25px;"><strong>Membros Ativos</strong></h3> <div class="agileinfo-team-grids"> <?php while($membros = mysqli_fetch_assoc($resultados)) { ?> <!--- INÍCIO----> <div class="col-md-3 wthree-team-grid usuario-foto"> <img src="images/profile-pic/pic-temp.png" alt="" /> <h4><a href="perfil.php?usuario=<?php echo $membros['nick'] ?>"><?php echo $membros['nick'] ?></a> #<?php echo $membros['id'] ?><br> <span class="badge-membro">Membro</span> </h4> <div class="badge alinhamento-mais"><a href="#" data-toggle="modal" data-target="#adbr_killer">Resumo</a></div> </div> <div class="modal about-modal fade" id="adbr_killer" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title">Resumo Rápido</h4> </div> <div class="modal-body"> <div class="agileits-w3layouts-info"> <p><strong>Apresentação Curta:</strong> <?php echo $membros["resumocurto"] ?></p> <p><strong>Estado:</strong> <?php echo $membros['estado'] ?></p> <p><strong>Classe Preferida:</strong> Médico <img src="images/classes/medic.png" width="26" class="alinhamento-estado"></p> <p><strong>Jogos:</strong> <div class="Qtip"> <img src="images/jogos/bf2.png" width="26" class="alinhamento-estado"> <span class="Qtiptext">Battlefield 2</span> </div> <div class="Qtip"> <img src="images/jogos/bf3.png" width="26" class="alinhamento-estado"> <span class="Qtiptext">Battlefield 3</span> </div> <div class="Qtip"> <img src="images/jogos/bf4.png" width="26" class="alinhamento-estado"> <span class="Qtiptext">Battlefield 4</span> </div> <div class="Qtip"> <img src="images/jogos/bf1.png" width="26" class="alinhamento-estado"> <span class="Qtiptext">Battlefield 1</span> </div> <div class="Qtip"> <img src="images/jogos/bfv.png" width="26" class="alinhamento-estado"> <span class="Qtiptext">Battlefield V</span> </div> </p> <p><strong>Patente na Platoon:</strong> Cabo</p> </div> </div> </div> </div> </div> <!--- FIM ----> </div> Porém, quando dentro deste código em específico (abaixo), no caso, que abre um lightbox, ele repete os dados da ID 1 do BD, não seguindo, pra ID 2, ID 3, etc.
      No caso são as variáveis "resumocurto" e "estado" que se repetem igualmente para todos.
      <div class="modal about-modal fade" id="adbr_killer" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Resumo Rápido</h4> </div> <div class="modal-body"> <div class="agileits-w3layouts-info"> <p><strong>Apresentação Curta:</strong> <?php echo $membros["resumocurto"] ?></p> <p><strong>Estado:</strong> <?php echo $membros['estado'] ?></p> <p><strong>Classe Preferida:</strong> Médico <img src="images/classes/medic.png" width="26" class="alinhamento-estado"></p> <p><strong>Jogos:</strong> "Lista de Jogos"</p> <p><strong>Patente na Platoon:</strong> Cabo</p> O mais engraçado é, quando eu faço essa busca dentro de uma lista <ul> ou <ol>, ele retorna os dados normalmente para cada perfil.
      <ul> <li>Nick: <?php echo $membros["nick"] ?> <strong>#<?php echo $membros["id"] ?></strong></li> <li>Ativo: <?php echo $membros["idstatus"] ?></li> <li>Estado: <?php echo $membros["estado"] ?></li> <li>Resumo Curto: <?php echo $membros["resumocurto"] ?></li> <li>Resumo Longo: <?php echo $membros["resumolongo"] ?></li> <li>Assalto: <?php echo $membros["assalto"] ?></li> <li>Médico: <?php echo $membros["medico"] ?></li> <li>Suporte: <?php echo $membros["suporte"] ?></li> <li>Atirador: <?php echo $membros["atirador"] ?></li> <li>Piloto de Avião: <?php echo $membros["pilotoaviao"] ?></li> <li>Tanque: <?php echo $membros["tanque"] ?></li> <li>Piloto de Heli: <?php echo $membros["pilotoheli"] ?></li> <li>Canal Youtube: <a href="<?php echo $membros['canalyt'] ?>" target="_blank">Link</a></li> <li>Adicionado Em: <?php echo date('d-m-Y / H:i:s', strtotime($membros['data_cadastro'])) ?></li> </ul> Existe alguma limitação no PHP para ele exibir dados numa DIV que abre a partir de um lightbox? Porque ele só retorna esses dados normalmente através de uma lista? O que eu preciso modificar no código em si para fazer com que ele apareça normalmente?
       
      Não sei se ficou claro...
    • By fideles
      Mais uma vez venho aqui pedir ajuda a vocês.
       
      Tenho um formulario que criei aqui na empresa algo bem simples, somente para sair das planilhas de excel, que seria cadastro de funcionarios.
       
      Tem os campos, matricula, nome completo, unidade de trabalho, endereço e telefone de emergencia.
       
      A parte do formulario funciona, a gravação no BD tbm, listar as informações também, ai me perguntaram se era possível um auto preenchimento dos campos colocando somente a matricula do funcionario e respondi que eu não sei porque realmente não sei.
       
      A ajuda que eu preciso de vocês seria, é possível fazer isso ? Colocar a matricula e vir do banco e preencher os outros inputs? Se sim, é possível me derem um exemplo de como funciona e eu estudar o codigo e colocar nos outros inputs.
       
      Obrigado antecipadamente. 
       
    • By lezão
      Boa noite!
      Td bem com vcs?
      Peguei um codigo de modal muito util para mim, mas ele naun sai do lugar, estou tentando posiciona lo em outro lugar e naun consigo.
      Ja fiz de tudo e nada resolveu alguém pode me ajudar?
      Gostaria que ele ficasse, aonde eu colocar ele aceitar e rodar.
      segue o codigo abaixo:
      <style> body {font-family: Arial, Helvetica, sans-serif;} * {box-sizing: border-box;} /* Button used to ppen the contact form - fixed at the bottom of the page */ .open-button { background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8; position: fixed; bottom: 23px; right: 28px; width: 280px; } /* The popup form - hidden by default */ .form-popup { display: none; position: fixed; bottom: 0; right: 15px; border: 3px solid #f1f1f1; } /* Add styles to the form container */ .form-container { max-width: 300px; padding: 10px; background-color: white; } /* Full-width input fields */ .form-container input[type=text], .form-container input[type=file], .form-container input[type=textarea] { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; } /* When the inputs get focus, do something */ .form-container input[type=text]:focus, .form-container input[type=file]:focus, .form-container input[type=textarea]:focus { background-color: #ddd; outline: none; } /* Set a style for the submit/login button */ .form-container .btn { background-color: #4CAF50; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 100%; margin-bottom:10px; opacity: 0.8; } /* Add a red background color to the cancel button */ .form-container .cancel { background-color: red; } /* Add some hover effects to buttons */ .form-container .btn:hover, .open-button:hover { opacity: 1; } </style> <button class="open-button" onclick="closeForm()">Open Form</button> <div class="form-popup" id="myForm"> <form action="/action_page.php" class="form-container"> <h1> <img src="http://mercatotal.com.br/gnservice/img/logotipo2.png" width="170px" height="70px"/></h1> <label for="nome"><b>Nome:</b></label> <input type="text" placeholder="Seu Nome" name="nome" required/> <label for="foto"><b>Foto:</b></label> <input type="file" placeholder="Sua Foto" name="foto" required/> <label for="comment"><b>Comentários:</b></label> <textarea placeholder="Seu Comentário" name="depoimento" cols="36,7" rows="10" required></textarea> <button type="submit" class="btn">Login</button> <button type="button" class="btn cancel" onclick="openForm()">Close</button> </form> </div> muito obrigado!
    • By carlosmassam
      Bom noite a todos.

      Eu tenho o seguinte código
       
      <input type="radio" id="radio01" name="radio01" value="radio01"> <input type="radio" id="radio02" name="radio02" value="radio02"> <input type="radio" id="radio03" name="radio03" value="radio03"> <input type="radio" id="radio04" name="radio04" value="radio04"> <input type="radio" id="radio05" name="radio05" value="radio05"> Este código me apresenta 5 radiobuttons distintos, um ao lado do outro. Eu gostaria que, ao clicar em um deles, desse check no radiobutton que eu cliquei e também em todos os radiosbuttons anteriores, e os radionbutton posteriores fossem "deschecado".
      Por exemplo: ao clicar no radio04, ele deve fichar com check, e os radio03, radio02 e radio01 também devem ficar com check, como o radio05 vem depois do radio04, ele não deve ser checado, então permanecerá como está.
      Mas se eu então clicar no radio02, os radio03 e radio04 devem mudar para "deschecado" e os radio02 e radio01 devem permanecerem checados.
    • By lezão
      Boa noite!
      Td bem com vcs?
       
      Meus amigos, estou precisando de um css que eu não faço ideia por onde começar ja pesquisei e nada.
      só encontrei como imagem, vejam.

       
      será que tem como fazer em css desse modelo, o texto tem q ficar sobreposto a cor do fundo.
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.