html - css:文本对齐、边距和填充如何协同工作

Question

我在做一个简单的引述时遇到了麻烦，引述在页面上居中/ float ，引述下方的人名与右侧对齐，正如人们经常看到的那样。

我尝试将此人姓名段落的文本对齐更改为“右对齐”，但这并没有解决问题(它太靠右了)。所以，我单独留下文本对齐(作为“中心”)，然后尝试添加 padding-left 和 margin-left，但是这两个都被忽略了，把人的名字留在了中间。 你能告诉我为什么这些(填充和边距)被忽略，还有一个很好的对齐方式，这样“whos-it-by”行与右边的引号相匹配-边缘？

您可以在此处查看页面，在顶部的灰色标题区域中引用:http://www.momentumnow.biz/mn/direct/testimonials2.shtml

我想把名字移过去，但很好奇为什么 padding 和 margin 似乎对 text-align 没有影响。

谢谢。

Answer 1

您有两个 p 元素的事实意味着它们显示在不同的行上 - p 表示段落。尝试将一个放在另一个里面，或者将两者都包裹在一个 div 中，然后应用绝对定位。或者，使用我的首选方法将它们更改为 span标签。

记住，<p>是 block 级元素，而 span是内联元素。

据我了解，您想实现类似 this 的目标.尝试使用 float: right

你也可以使用 CSS

p.yourclass {text-align: right}

解决方案:http://jsfiddle.net/TqE2x/