Boa tarde!
Preciso agrupar 19 input, de vários tamanhos, dentro de um retângulo. Este retângulo seria a borda (figura abaixo). Estou tentando, mas não consigo. Ainda, e como estilizar eles usando o CSS de forma parecida com a figura. Alguém pode me ajudar?
Oi estudante, tudo bem?
Para agrupar os 19 inputs dentro de um retângulo, você pode usar HTML e CSS. Vou fornecer um exemplo básico que você pode adaptar de acordo com suas necessidades. Por exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Agrupando Inputs em um Retângulo</title>
<style>
.container {
border: 2px solid #000;
border-radius: 5px;
padding: 10px;
width: 400px;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.input-box {
margin: 5px;
padding: 5px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="input-box">
<input type="text" name="input1" placeholder="Input 1">
</div>
<div class="input-box">
<input type="text" name="input2" placeholder="Input 2">
</div>
<!-- Adicione os demais inputs aqui -->
<!-- Exemplo: -->
<!-- <div class="input-box"> -->
<!-- <input type="text" name="input3" placeholder="Input 3"> -->
<!-- </div> -->
</div>
</body>
</html>
Nesse exemplo, criamos uma div com a classe "container" que representa o retângulo. Definimos suas dimensões (width e height), a cor da borda (border), o espaçamento interno (padding), o raio do canto (border-radius), e usamos display: flex para permitir que os elementos internos sejam organizados em várias linhas.
O flex-wrap: wrap faz com que os elementos quebrem para a próxima linha quando não houver espaço suficiente.
Os inputs são colocados dentro de divs com a classe "input-box". Essas divs têm margens (margin) e preenchimentos (padding) para criar um espaçamento entre elas e uma aparência semelhante à figura que você mencionou.
A cor de fundo (background-color) e a borda (border) também podem ser personalizadas de acordo com suas preferências.
Você pode adicionar estilos adicionais para os inputs no bloco input. Por exemplo, você pode adicionar padding, alterar a fonte, adicionar uma borda, e assim por diante para que fique da maneira que você desejar.
Por favor, note que este é um exemplo básico e pode não atender a todas as suas necessidades. Você pode precisar ajustar o código conforme necessário para atender aos seus requisitos específicos. Vai ser uma ótima maneira de praticar.
Um abraço e bons estudos.
Olá, Lorena. Tá tudo ótimo com a sua explicação. As coisas estão ficando mais claras no CSS, mas no HTML eu não consigo resolver o local para colocar os inputs. Vou compartilhar o código aqui para você verificar onde que estou errando.
Deixa eu lhe explicar: Eu quero fazer preenchimentos eletrônicos de entrada e saída de caminhões com “input”, mas não estou conseguindo. Eu preciso fazer igual fiz no lado 2, só que ao invés de tabela, como fiz, tem que ser com input, para preenchimento de campos. (assim eu acho). Tentei fazer outro input no lado 1, mas ele apareceu no centro e não consegui movimentá-lo pra cima como eu coloquei o primeiro input. É no lado1, no canto superior e ocupando toda largura que eu quero que fique o retângulo com todos os 19 inputs, assim como estão no lado 2 a tabela. É isso... Lorena, você pode me ajudar, por favor?
OBS.: Não consegui enviar todo código do CSS, pois extrapolou o limite de caracteres.
NO HTML:
<div class="cabecalho">
<p class="nomeenumero">1234<br>Fábio</p>
<p class="relogio">Relógio</p>
<form>
<input type="text" id="Texto de observações" >
</form>
</div>
<div class="chegadas">
<p class="chegada">CHEGADA</p>
<p class="saida">SAÍDA</p>
<div class="lado1">
<form>
<input type="text" id="placa">
</form>
</div>
<div class="lado2">
<table width="100%">
<tr>
<td class="celula7">XXXX</td>
<td class="celula8">XXXX XXXX</td>
<td class="celula9">XXXX X XXXX</td>
<td class="celula10">X XXX XXXX</td>
<td class="celula11">XXXXXXXXXXXXXXX</td>
<td class="celula12">XX</td>
<td class="celula13">XXXXX</td>
</tr>
</table>
</div>
</section>
</header>
</body>
<footer></footer>
NO CSS:
body{ background: #213363; border: 10px solid #9DB2BF;}
form input{ width: 75%; margin: 10px -33px 10px 40px; padding: 10px 60px; background-color: #61677A; font-size: .8em; border-radius: 6px; display: flex; display: inline-block; }
.cabecalho{ background: green; text-align: center; color: aliceblue; font-size: 2.5em; font-family: 'Roboto', sans-serif; border: 8px solid #213363; border-radius: 20px; }
.nomeenumero{
color:#fff;
font-size:.6em;
font-weight: bold;
float: left;
margin: 5.5px 0 0 60px;
border: 4px solid #000;
border-radius: 8px;
padding: 2px 6px 2px 6px;
background-color: #213363;
}
.relogio{
color:#fff;
font-size:.6em;
font-weight: bold;
float: right;
margin: 15px 40px 0 60px;
border: 4px solid #000;
border-radius: 8px;
padding: 6px 4px 6px 4px;
background-color: #213363;
}
.oslados{ display: flex;
}
.lado1{
background: #1659bf;
width: 50%;
text-align: center;
padding: 15em;
color: aliceblue;
font-size: 1.2em;
border: 8px solid #ffffff;
}
#placa{ padding: 10px 40PX 30px 40PX; margin: -280px 10px 10px -280px; background-color: #FF8551; color: #fff; display: flex; display: block; flex-wrap: wrap; font-size: 1em; height: 100%; }
.chegadas{ display: flex; justify-content: space-between; margin: 2px 310px 9px 345px; padding: auto; }
.chegada{
font-size: 22px;
font-weight: bold;
border: 2px solid #ffffff;
border-radius: 5px;
background: #FF8551;
padding: 2px 2px 1px 2px ;
}
.saida{
font-size: 22px;
font-weight: bold;
border: 2px solid #ffffff;
border-radius: 5px;
background: #FF8551;
padding: 2px 2px 1px 2px ;
}
table{ display: inline;}
tr{ background: #61677A; }
Oi, Lorena, enviei agora os códigos em CSS completo:
body{ background: #213363; border: 10px solid #9DB2BF;}
form input{ width: 75%; margin: 10px -33px 10px 40px; padding: 10px 60px; background-color: #61677A; font-size: .8em; border-radius: 6px; display: flex; display: inline-block; }
.cabecalho{ background: green; text-align: center; color: aliceblue; font-size: 2.5em; font-family: 'Roboto', sans-serif; border: 8px solid #213363; border-radius: 20px; }
.nomeenumero{
color:#fff;
font-size:.6em;
font-weight: bold;
float: left;
margin: 5.5px 0 0 60px;
border: 4px solid #000;
border-radius: 8px;
padding: 2px 6px 2px 6px;
background-color: #213363;
}
.relogio{
color:#fff;
font-size:.6em;
font-weight: bold;
float: right;
margin: 15px 40px 0 60px;
border: 4px solid #000;
border-radius: 8px;
padding: 6px 4px 6px 4px;
background-color: #213363;
}
.oslados{ display: flex;
}
.lado1{
background: #1659bf;
width: 50%;
text-align: center;
padding: 15em;
color: aliceblue;
font-size: 1.2em;
border: 8px solid #ffffff;
}
#placa{ padding: 10px 40PX 30px 40PX; margin: -280px 10px 10px -280px; background-color: #FF8551; color: #fff; display: flex; display: block; flex-wrap: wrap; font-size: 1em; height: 100%; }
.chegadas{ display: flex; justify-content: space-between; margin: 2px 310px 9px 345px; padding: auto; }
.chegada{
font-size: 22px;
font-weight: bold;
border: 2px solid #ffffff;
border-radius: 5px;
background: #FF8551;
padding: 2px 2px 1px 2px ;
}
.saida{
font-size: 22px;
font-weight: bold;
border: 2px solid #ffffff;
border-radius: 5px;
background: #FF8551;
padding: 2px 2px 1px 2px ;
}
table{ display: inline;}
tr{ background: #61677A; }
.celula1{
color: black;
font-size: 22px;
font-weight: bold;
display: flex;
justify-content: space-between;
margin: 15px 10px 10px 15px;
}
.celula2{
color: black;
font-size: 18px;
font-weight: bold;
}
.lado2{ background: #1659bf; display: flex; width: 50%; color: aliceblue; font-size: 1.2em; border: 8px solid #ffffff;}
.celula7{ color: black; font-size: 2.2em; font-weight: bold; display: flex; margin: 15px 10px 10px 15px; padding: 6px 4px 2px 2px; text-align: center; }
.celula8{ color: #000; text-align: center; font-weight: bold; font-size: 1.2em;
} .celula9{ color: #000; text-align: center; font-weight: bold; font-size: 1.2em;}
.celula10{ color: #000; text-align: center; font-weight: bold; font-size: 1.2em;}
.celula11{ color: #000; text-align: center; font-weight: bold; font-size: 1.2em;}
.celula12{ color: #000; text-align: center; font-weight: bold; font-size: 2em;}
.celula13{ color: #000; text-align: center; font-weight: bold; font-size: 1.2em;}