Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ludhianapaiva

display:inline; manter a imagem na mesma linha

Recommended Posts

A minha situação é seguinte: Eu tenho um select com 3 tipos de endereço de entrega, que são residencial, comercial e de entrega. Quando o usuário seleciona "residencial" eu quero mostrar um ícone para q ele possa copiar o endereço do cônjunge dele. O problema é que eu quero mostrar esse ícone na frente do select, mas meu 'inline' não está colocando ele na mesma linha do select, está descendo uma linha.

O que eu preciso fazer pra isso funcionar?

A troca de classe eu faço no javascript.

 

Segue o trecho que interessa do código:

 

.inline-css {display:inline}

.inv {display:none}

 

 

<tr><td>Tipo de Endereço:
<td><select name="tipo_end" id="tipo_end"></select>
<div id='div_copy' class='inv'><img title="Copiar o endereço residencial do cônjuge" id="copiaEndConj" width=25 class='img' src="copypaste2.png"></div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Já tentou sem usar tabelas?

O seu select também vai precisar estar 'inline' para a imagem aparecer depois dele.

Ou então crie uma div com um tamanho fixo e use 'float: left' nos elementos dentro dela. Consequentemente a imagem vai flutuar para a esquerda (que está ocupada pelo select), então ela será mostrada depois dele, na mesma linha.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não é recomendado uso de tabelas, mas como você usou, então vamos:

 

O seu código está correto, porem as tabelas tendem a manter o máximo justo o espaçamento de suas colunas.

Nesse caso use a propriedade css na TD da seguinte forma:

td{
    white-space: nowrap;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

CSS

#divgeral {
width:300px;
height:100px;
}
#divimg1 {
width:100px;
height:100px;
float:left;
}
#divimg2 {
width:100px;
height:100px;
float:left;
}
#divimg3 {
width:100px;
height:100px;
float:left;
}
#divgeral img {
width:100%;
height:100%;
border:none;
}

---------------------------------------------------------------------------------

HTML

<div id="divgeral">
<div id="divimg1"><img src="img1.png" /></div>
<div id="divimg2"><img src="img2.png" /></div>
<div id="divimg3"><img src="img3.png" /></div>
</div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.