3

Eu simplesmente não percebo porque é que a terceira linha não fica alinhada com o resto do texto. http://jsfiddle.net/Ra35L/2/

HTML:

<div id="contact"><h1>CONTACTO</h1>
    <p>+(351) 968 888 888&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+(351) 218 888 888<br><br>
    <a href="mailto:[email protected]" target="_blank">[email protected]</a><br><br>
    Avenida da República, Torre Soleil

</p></div>

CSS:

#contact {
    width: 50%;
    float: left;
    background-color: #449DCC;
    height: 350px;
}
#contact h1 {
    color:#fff;
    font-size:18
}
#contact p {
    float: right;
    margin-right: 25px;
    font-size: 15px;
    color:#fff;
}
#contact a {
    float: right;
    font-size: 15px;
    color:#fff;
    text-decoration: underline;
}
6
  • todo é resto é para que lado? Esquerda ou direita? Commented 28/04/2014 às 14:09
  • É tudo encostado à direita
    – Miguel
    Commented 28/04/2014 às 14:09
  • Eu sugiro evitar <br />(s) e espaços dessa maneira... é isto que procura? jsfiddle.net/Ra35L/3
    – Sergio
    Commented 28/04/2014 às 14:10
  • Exactamente, mas porque é que os '<br>' prejudica essas formatações?
    – Miguel
    Commented 28/04/2014 às 14:11
  • @Miguel, respondí em baixo, mais detalhado do que teria espaço aqui nos comentários.
    – Sergio
    Commented 28/04/2014 às 14:18

3 Respostas 3

1

Você pode usar a propriedade text-align. Exemplo, que simplesmente alinha todo texto na posição que você especificar (direita, esquerda ou centro)

#contact p {
    float: right;
    margin-right: 25px;
    text-align: right;
    font-size: 15px;
    color:#fff;
}
1
  • Obgado, parece-me ser a resposta mais lógica apesar de todas resultarem. jsfiddle.net/Ra35L/9
    – Miguel
    Commented 28/04/2014 às 14:21
0

Penso que o que pretendes é este resultado:

jsfiddle

<div id="contact"><h1>CONTACTO</h1>
   <p>+(351) 967 181 237&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+(351) 214 569 018<br><br></p>
   <a href="mailto:[email protected]" target="_blank">[email protected]</a><br><br>
   <p>Avenida da República, Torre Soleil</p>

</div>

.

#contact a {
    float: right;
    font-size: 15px;
    margin-right: 25px;
    color:#fff;
    text-decoration: underline;
}

O que fiz?

Fechei o <p> antes do <a> e abri de novo no fim do </a>; Coloquei margin-right: 25px; no CSS #contact a para ficar tudo bem alinhado.

0

Coloque um <p>texto</p> para cada linha

<div id="contact">
    <h1>CONTACTO</h1>
    <p>(351) 967 181 237&nbsp;(351) 214 569 018</p>
    <p><a href="mailto:[email protected]" target="_blank">[email protected]</a></p>
    <p>Avenida da República, Torre Soleil</p>
</div>

Link: http://jsfiddle.net/Ra35L/5/

2
  • Muito obgado. Porque é que os '<br>' prejudica a formatação?
    – Miguel
    Commented 28/04/2014 às 14:13
  • Na verdade não prejudica, mas, geralmente a gente faz <br /> em texto maiores ... tags assim fica organizado com p
    – user6026
    Commented 28/04/2014 às 14:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .