Quebra de linha com <div> [resolvido]

28 de janeiro de 2012 4 respostas

michelorth_92 28 de janeiro de 2012

e ai galera.... to tendo q colocar duas div no meu codigo e não que que haja e quebra de linha.... ja tentei varios css q tem na net ai mas nenhum deu certo cmgo

quero q a primeira div fique no meio da pagina e a segunda no lado direito

<div id="t1" align="center">
				
				<p:commandButton value="Atualizar"
					action="#{ordemDeServicoBean.update}" ajax="false" update="total"/>
					</div>
					
					<div id="t2" align="right">
			<h:outputLabel value="Valor Desconto"/>				
			<p:inputText value="#{ordemDeServicoBean.valorDesconto}" />
   			<p:commandButton value="Calcular" action="ordemDeServicoBean.desconto" update="total" ajax="false"/>
	</div>

4 Respostas

Gustavo_Marques 28 de jan. de 2012

Existe várias formas de se fazer isso.
Você pode colocar as duas divs com display inline, assumindo que uma vem logo em seguida da outra.
Ou você pode colocar float left em uma e float right na outra, com um container segurando as duas, assim, se a soma dos width (junto com os marggins e paddings) das duas não ultrapassar o width do container, ficarão lado a lado.

michelorth_92 29 de jan. de 2012

opa deu certo masssss… ele fico um do lado do outro e nao no centro e outro no lado direito

css

div.a{

display: inline;

width:100px;

}

jsf

<div class="a" align="center" >				
			<p:commandButton value="Atualizar"
				action="#{ordemDeServicoBean.update}" ajax="false" update="total"/>
			</div>
				
		<div class="a"  align="right">
		<h:outputLabel value="Valor Desconto"/>				
		<p:inputText value="#{ordemDeServicoBean.ordemDeServico.valorDesconto}" style="width: 40px"/>
		<p:commandButton value="Calcular" action="#{ordemDeServicoBean.desconto}" update="total" ajax="false"/>
		</div>

Gustavo_Marques 29 de jan. de 2012

Tenta assim

ao invéz de display:inline coloca float:right;

css

div.a{

float:right;

width:100px;

}

jsf

Veja se consegue

michelorth_92 29 de jan. de 2012

vlw maninho deu certo...

<div class="a" align="right">
					<h:outputLabel value="Valor Desconto" />
					<p:inputText
						value="#{ordemDeServicoBean.ordemDeServico.valorDesconto}"
						style="width: 40px" />
					<p:commandButton value="Calcular"
						action="#{ordemDeServicoBean.desconto}" update="total"
						ajax="false" />
				</div>

				<div align="right">
					<p:commandButton value="Atualizar"
						action="#{ordemDeServicoBean.update}" ajax="false" update="total" />
				</div>

				<div style="clear: both;"></div>

css

div.a {
	float: right;
	width: 500px;
}

Criado 28 de janeiro de 2012

Ultima resposta 29 de jan. de 2012

Respostas 4

Participantes 2

4 Respostas

Topicos relacionados