Utilizo o JQuery Validate para fazer a validação de inputs, porém quando a validação falha, é criado um label de mensagem de erro ao lado do input.
Meu objetivo é fazer com que esse label seja mostrado abaixo do input, sem alterar a posição dos inputs ao lado do input validado, mas quando utilizo a propriedade CSS 'display: block', os inputs ao lado são empurrados para baixo, como se houvesse um '< br >' entre os inputs e o label de erro gerado pela validação.
Segue demonstração
Antes da validação:
Depois da validação:
O código CSS do label de erro é muito simples:
label.error {
font: 11px arial;
margin-left: 2px;
display: block; }
Caso minha pergunta esteja incompleta, por favor me avise que irei complementar a pergunta o mais rápido possível.
display:inline-block
?