Alinhando objetos html com CSS

Estávamos tendo o problema com alinhamento de objetos simples como na foto:

E gostaríamos que ficasse assim:

O problema é que cada objeto estava com um tamanho diferente, atrapalhando o alinhamento e mesmo forçando a altura não funcionava. O segredo foi usar:

display: inline-block;

O inline-block deixa os objetos independentes, podendo setar a altura individual alem de ajudar em outras tarefas como alinhamento.

Após o uso do comando, foi possível colocar uma nova altura para o span, e essa altura acabou que alinhando com o input text.
O código final ficou:

<html>

<head>

<style>

body{
	font-family: Verdana;
	font-weight: normal;
	font-size: 11px;
}

span{
	color: red;
	display: inline-block;
	height: 18px;
}

label{
	display: inline-block;
	height: 18px;
}
</style>

</head>

<body>
	<label id="label" for="inputTeste">Label:</label>
	<input type="text" id="inputTeste">
	<img src="error.gif">
	<span class="required">erro teste</span>

	<br>

	<label id="label" for="inputTeste2">Label:</label>
	<input type="text" id="inputTeste2">
	<img src="error.gif">
	<span class="required">erro teste</span>
</body>
</html>

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Blue Captcha Image
Atualizar

*

Facebook

Get the Facebook Likebox Slider Pro for WordPress
WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera