css - 为什么我不能用 display: block 和 width: X 右对齐元素？

Question

这里的总 n00b 问题（至少对于 CSS 精英）：

为什么同时display: block;具有值和值的元素width似乎不符合text-align其父项的属性？也就是说，它似乎总是坚持向左走。

显然，这必须与 CSS 规范一致（我的意思是，如果 Chrome、Firefox 和 Opera 都同意，我几乎没有疑问）；我只是不明白。

score 16 · Accepted Answer

文本在 150 像素的框内对齐。那是对的。块元素不会与父元素中的 text-align 对齐。

要解决此问题，您需要在 .width div 上使用display: inline-block或使用。float: right

编辑：使用浮动，添加clear: right以避免它与前一个 div 在同一行

score 1 · Accepted Answer

<span>是一个带有的元素display: inline。display: inline跟随文本对齐的元素。display: block不遵循文本对齐方式的元素由浮动对齐 OWNED。

当您仅更改元素的宽度时，仍会按照文本的对齐方式保持内联，但是当您将显示更改为阻塞并更改其宽度时，其内容会采用文本的对齐方式，但元素不会。我试图用你的代码中的一些颜色来说明这一点；）

score 0 · Accepted Answer

这是因为您的课程是块宽度而不是宽度。重命名类 block_width ，然后在你的css中制作最后一个 .block_width 而不是你拥有的 .width 并且它可以工作

score 0 · Accepted Answer

替代方式

<div style="text-align:right; margin:0px auto 0px auto;">
<p> Hello </p>
</div>
  <div style="">
<p> Hello </p>
</div>

4 回答 4