alinhar campos

[kildare]

Pessoal,

tenho o código abaixo, e gostaria de saber como faço para deixar os campos lado a lado e do mesmo tamanho.

<fieldset>
<legend>cad</legend>

<label>Nome:</label>
  <input type="text" id="nome" name="nome">
<label>Email:</label>
  <input type="email" id="email" name="email">
<label>Data:</label>
  <input type="date" id="data" name="data">
<label>Cod. Promoção:</label>
  <input type="text" id="promo" name="promo" ">
  <input type="submit" value="Enviar" /> 
</fieldset>

Agradeço a todos.

[atkins]

Manda o css pra eu dar uma olhada e te falo o que modificar...

[kildare]

Caro amigo,

Segue o código completo.

<fieldset>
<legend>cad</legend>

<label>Nome:</label>
  <input type="text" id="nome" name="nome">
<label>Email:</label>
  <input type="email" id="email" name="email">
<label>Data:</label>
  <input type="date" id="data" name="data">
<label>Cod. Promoção:</label>
  <input type="text" id="promo" name="promo" ">
  <input type="submit" value="Enviar" /> 
</fieldset>

<style>

:invalid { 
  border-color: #e88;
  -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
  -moz-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
  -o-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
  -ms-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
  box-shadow:0 0 5px rgba(255, 0, 0, .8);
}

:required {
  border-color: #88a;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
  -o-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
  -ms-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
  box-shadow: 0 0 5px rgba(0, 0, 255, .5);
}

form {
  width:500px;
  margin: 20px auto;
}

select {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  border:1px solid #ccc;
  font-size:15px;
  width:300px;
  min-height:30px;
  display:block;
  margin-bottom:15px;
  margin-top:5px;
  outline: none;
  -webkit-border-radius:5px;
  /*border-color: #e88;*/
   
}

input {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  border:1px solid #ccc;
  font-size:15px;
  width:300px;
  min-height:30px;
  display:block;
  margin-bottom:15px;
  margin-top:5px;
  outline: none;

  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
  border-radius:5px;
}

input[type=submit] {
  background:none;
  padding:10px;
}
</style>

[atkins]

Pra deixar eles do mesmo tamanho é só colocar o width e height igual para todos...

Para deixar eles lado a lado, coloca position:relative; e vai colocando um de cada lado com top: e left:...