Probar las manos en HTML simple. Quiere poner la dirección del remitente en el lado derecho de la página pero <p style="text-align: right;"> falla.

Probé la solución de Mozilla MDN y otros blogs básicos en HTML y CSS, pero no pude encontrar una solución.

Aquí está mi código:

body {
  height: 297mm;
  width: 210mm;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 1px;
}

h3 {
  padding: 0px;
  margin: 0px;
}

p {
  margin-left: 105mm;
}
<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="author" content="Python Buddha" />
  <link rel="stylesheet" href="styles.css">
  <title>Letter</title>
</head>


<p style="text-align: right;">
  <h3>Dr. Eleanor Gaye</h3>
  Awesome Science faculty<br> University of Awesome<br> Bobtown, CA 9999<br> USA
  <br>
  <strong>Tel</strong>: 123-4567890<br>
  <strong>E-mail</strong>:no_reply@example.com<br>
  <time datetime="">20 January 2016</time>
</p>

<h3>Miss Eileen Dover</h3>
4321 Cliff Top Edge<br> Dover, CTC XXX<br> UK
<br>

</body>

</html>
2
pythonbuddha 10 may. 2019 a las 08:26

5 respuestas

La mejor respuesta

Y ahí tienes un código simple:

body {
  height: 297mm;
  width: 210mm;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 1px;
}

h3 {
  margin-bottom: 0px;
}

.sender {
  text-align: right;
}
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="author" content="Python Buddha" />
  <link rel="stylesheet" href="styles.css">
  <title>Letter</title>
</head>

<body>
  <div class="sender">
    <h3>Dr. Eleanor Gaye</h3>
    Awesome Science faculty<br> University of Awesome<br> Bobtown, CA 9999<br> USA
    <br>
    <strong>Tel</strong>: 123-4567890<br>
    <strong>E-mail</strong>:no_reply@example.com<br>
    <time datetime="">20 January 2016</time>
  </div>
  <div>
    <h3>Miss Eileen Dover</h3>
    4321 Cliff Top Edge<br> Dover, CTC XXX<br> UK
    <br>
  </div>

</body>

</html>
2
Nazim Kerimbekov 10 may. 2019 a las 19:32

Si desea una dirección en el lado derecho, entonces hay un par de cambios:

  • Use div en lugar de etiqueta p
  • Luego use float en lugar de text-align.
body{
  height: 297mm;
  width: 210mm;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 1px;
}

h3{
  padding: 0px;
  margin: 0px;
}

div + h3{
  clear:both;
}
<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="author" content="Python Buddha"/>
  <link rel="stylesheet" href="styles.css">
  <title>Letter</title>
</head>

<div style="float: right;">
  <h3>Dr. Eleanor Gaye</h3>
  Awesome Science faculty<br>
  University of Awesome<br>
  Bobtown, CA 9999<br>
  USA<br>
  <strong>Tel</strong>: 123-4567890<br>
  <strong>E-mail</strong>:no_reply@example.com<br>
  <time datetime="">20 January 2016</time>
</div>

<h3>Miss Eileen Dover</h3>
4321 Cliff Top Edge<br>
Dover, CTC XXX<br>
UK<br>

</body>
</html>
2
Abhilesh Srivastava 10 may. 2019 a las 07:08

Poner <p> dentro div tag

body{
      height: 297mm;
      width: 210mm;
      margin-left: auto;
      margin-right: auto;
      border-style: solid;
      border-width: 1px;
}

h3{
  padding: 0px;
  margin: 0px;
}

p{
  margin-left: 105mm ;
}
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="author" content="Python Buddha"/>
    <link rel="stylesheet" href="styles.css">
    <title>Letter</title>
  </head>

  <div style="text-align: right;">
  <p>
    <h3>Dr. Eleanor Gaye</h3>
    Awesome Science faculty<br>
    University of Awesome<br>
    Bobtown, CA 9999<br>
    USA<br>
    <strong>Tel</strong>: 123-4567890<br>
    <strong>E-mail</strong>:no_reply@example.com<br>
    <time datetime="">20 January 2016</time>
  </p>
  </div>

  <h3>Miss Eileen Dover</h3>
  4321 Cliff Top Edge<br>
  Dover, CTC XXX<br>
  UK<br>

  </body>
</html>
1
Mohideen bin Mohammed 10 may. 2019 a las 05:39

Deberías almacenarlo en la etiqueta div.

 <div style="text-align: right">
   <h2>text-align: right:</h2>
 </div>

Así será así ...

<div style="text-align: left; float: right;">
  <h3>Dr. Eleanor Gaye</h3>
  Awesome Science faculty<br> University of Awesome<br> Bobtown, CA 9999<br> USA
  <br>
  <strong>Tel</strong>: 123-4567890<br>
  <strong>E-mail</strong>:no_reply@example.com<br>
  <time datetime="">20 January 2016</time>
</div>
0
Nazim Kerimbekov 10 may. 2019 a las 19:33

Use div en lugar de p.

<div style="text-align: right;">
  <h3>Dr. Eleanor Gaye</h3>
  Awesome Science faculty<br> University of Awesome<br> Bobtown, CA 9999<br> USA
  <br>
  <strong>Tel</strong>: 123-4567890<br>
  <strong>E-mail</strong>:no_reply@example.com<br>
  <time datetime="">20 January 2016</time>
</div>

O si desea mostrar uno está en el lado derecho y otra parte en el lado izquierdo. Entonces puedes hacer esto.

<div style="float: right;">
  <h3>Dr. Eleanor Gaye</h3>
  Awesome Science faculty<br> University of Awesome<br> Bobtown, CA 9999<br> USA
  <br>
  <strong>Tel</strong>: 123-4567890<br>
  <strong>E-mail</strong>:no_reply@example.com<br>
  <time datetime="">20 January 2016</time>
</div>
0
Nazim Kerimbekov 10 may. 2019 a las 19:34