Question

尝试简单的HTML。想要将发件人地址放在页面的右侧，但<p style="text-align: right;">失败。

我尝试了Mozilla MDN和其他有关HTML和CSS的基本博客的解决方案，但是没有找到解决方案。

这是我的代码：

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>

Answer 1

然后您将获得简单的代码：

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>

Answer 2

将<p>放入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>

Answer 3

使用div代替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>

或者如果您想显示一个在右侧，而另一部分在左侧。然后，您可以执行此操作。

<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>

Answer 4

您应该将其存储在div标签上。

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

所以会是这样。

<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>

Answer 5

如果您想在右侧显示地址，则需要进行一些更改：

使用div代替p标签
然后使用float而不是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>

文字不在右侧

5 个答案: