alinhar campos

[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.

<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>

[atkins]

Você quer deixar eles alinhados verticalmente?? Porque horizontalmente não vi problemas...

[gusmborges]

Eu queria deixar na horizontal, mas não estou conseguindo. Como faço?

[atkins]

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

[_Vinny_]

Em .campo adicione:

display: inline-block;