在文本旁边对齐<p>内联

Question

我正在尝试将一个样式化的p标签与一些echo文本对齐，但是一旦我添加了display：inline;属性文本不对齐。

代码：

echo $flight[0];
echo '<p style="display: inline; text-align: right;">'.$flight[11].' - '.$flight[13].'</p><br>';

Answer 1

文字 对齐。问题是内联元素仅与其内容一样宽，因此将文本左对齐，居中对齐或右对齐，不会在视觉上改变任何内容。请查看以下示例。我已经应用了边框，因此您可以看到正在发生的事情。

要提供解决方案，请编辑您的问题，并清楚地说明您的结果应该是什么样的。

＆＃13;

＆＃13;

p { border: 1px dotted red; }

＆＃13;

<p style="display: inline; text-align: left;">Text is aligned left</p>
<br />
<p style="display: inline; text-align: center;">Text is aligned center</p>
<br />
<p style="display: inline; text-align: right;">Text is aligned right</p>  

＆＃13;

＆＃13;

＆＃13;