gusmborges Postado Janeiro 30, 2013 Denunciar Share Postado Janeiro 30, 2013 Caro colegas,Estou com este código, e gostaria de saber como faço para deixar os campos lado a lado dentro de fieldset.<style> h1{ margin: 1px; } fieldset{ border: 1; margin: 0 auto; } body input, select, textarea, button{ font-family: arial; font-size: 1em; } .campo{ margin-bottom: 1em; } .campo label{ margin-bottom: 0.2em; color: #666; display: block; font-family: arial; } fieldset.grupo .campo{ float: left; margin-right: 1em; } .campo input{ padding: 0.2em; border: 1px solid #ccc; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); display: block; } .campo select option{ padding-left: 1em; } .campo input.focus, .campo select:focus, .campo textarea:focus{ background: #FFC; } .campo label{ color: #000; display: inline-block; margin-right: 1em; } botao{ font-size: 1.5em; background: #f90; border: 0; margin-bottom: 1em; color: #fff; padding: 0.2em 0.6em; box-shadow: 2px 2px 2px rgba( 0, 0, 0, 0.2); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); } .botao:hover{ background: #fb0; box-shadow: inset 2px 2px 2px rgba( 0, 0, 0, 0.2); text-shadow: none; } .botao, select{ cursor: pointer; } </style> <form id="cadveiculo" method="post" action=""> <fieldset> <legend>Cadastro de Veículo</legend> <fieldset> <div class="grupo"> <div class="campo"> <label form="codigo">Código</label> <input type="text" id="codigo" name="codigo" /> </div> <div class="campo"> <label for="placa">Nº Placa</label> <input type="text" id="placa" name="placa" /> </div> </div> <div class="campo"> <label>Ano Fabricação</label> <input type="text" id="fabricacao" name="fabricacao" /> </div> <div class="campo"> <label>Marca</label> <select id="selMarca" class="campo"> <option value=""></option> <option value="f">FIAT</option> <option value="vw">VOLSKWAGEN</option> <option value="ch">CHEVROLET</option> <option value="fo">FORD</option> </select> </div> <div class="campo"> <label>Modelo</label> <input type="text" id="marca" name="marca" /> </div> <div class="campo"> <label>Porta</label> <input type="text" id="porta" name="porta" /> </div> <div class="campo"> <label>Combustível</label> <select id="selComb"> <option value=""></option> <option value="a">ALCOOL</option> <option value="D">DIESEL</option> <option value="g">GASOLINA</option> <option value="f">FLEX</option> </select> </div> <div class="campo"> <label>KM</label> <input type="text" id="km" name="km" /> </div> <div class="campo"> <label>Cor</label> <input type="text" id="cor" name="cor" /> </div> <div class="campo"> <label>Categoria</label> <select id="selCategoria"> <option value=""></option> <option value="b">BASICO</option> <option value="bo">BASICO C/ OPCIONAIS</option> <option value="i">INTERMEDIÁRIO</option> <option value="io">INTERMEDIÁRIO C/ OPCI0NAIS</option> <option value="p">PREMIUM</option> <option value="po">PREMIUM C/ OPCIONAIS</option> <option value="u">UTILITÁRIOS</option> </select> </div> <div class="campo"> <label>Data Aquisição</label> <input type="date" /> </div> <div class="campo"> <label>Valor Locação</label> <input type="text" id="valor" name="valor" /> </div> </fieldset> <button class="botao" type="submit" name="submit">Salvar</button> </fieldset> </form> Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 atkins Postado Janeiro 30, 2013 Denunciar Share Postado Janeiro 30, 2013 Você quer deixar eles alinhados verticalmente?? Porque horizontalmente não vi problemas... Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 gusmborges Postado Janeiro 30, 2013 Autor Denunciar Share Postado Janeiro 30, 2013 Eu queria deixar na horizontal, mas não estou conseguindo. Como faço? Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 atkins Postado Janeiro 30, 2013 Denunciar Share Postado Janeiro 30, 2013 Se já tentou usar position: relative; e left:px; e top:; para posicionar??Eu faria assim... tenta ae, qualquer coisa se não rolar me avisa que te ajudo Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 _Vinny_ Postado Janeiro 31, 2013 Denunciar Share Postado Janeiro 31, 2013 Em .campo adicione:display: inline-block; Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
gusmborges
Caro colegas,
Estou com este código, e gostaria de saber como faço para deixar os campos lado a lado dentro de fieldset.
Link para o comentário
Compartilhar em outros sites
4 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.