Question

我试过写一封信，我想知道为什么当我使用span类时，css没有实现（日期不会向左移动），但是当我使用div时class，css已实现。（日期向左移动）。我假设两者都应该工作，但一个是块级元素，另一个是内联。我更改了这一行：

<div class="receiver-column"> 20 January 2016 </div>

到

<span class="receiver-column">20 January 2016 </span>

继承html代码：

＆＃13;

body {
  max-width: 800px;
  margin: 0 auto;
}

.receiver-column {
  text-align: right;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.3em;
}

p,
ul,
ol,
dl,
address {
  font-size: 1.1em;
}

p,
li,
dd,
dt,
address {
  line-height: 1.5;
}

＆＃13;

<p class="receiver-column"><strong>Dr. Eleanor Gaye </strong> Awesome Science faculty <br> University of Awesome <br> Bobtown, CA 99999, <br> USA <br>
  <strong>Tel</strong>: 123-456-7890 <br>
  <strong>Email</strong>: no_reply@example.com </p>

<div class="receiver-column"> 20 January 2016 </div>

＆＃13;

Answer 1

span元素是内联的，因此它只与其内容一样宽（即通常是它包含的文本）。现在，如果您对其应用text-align: right，即使文本正确对齐，也只能在跨度的宽度范围内，该宽度仅与其内容一样宽。所以这根本不会有所作为。

因此，如果要使用文本对齐方式，请使用div，p，h1，h2，h3等块元素。 / p>

Answer 2

默认显示跨度：内联元素，而Div为显示：块

div类适用于css，但是span类不适用于

2 个答案: