在不同位置对齐多段文本

Question

我希望我的电子邮件和单词'email'在右对齐。我知道我的电子邮件在左边会更长。

<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<div>
<div>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px;">E-mail</p>
</div>
<br>
<div>
<p style="font-size: 20px; color: white; float: right; padding-right: 10px;">[e-mail]</p>
</div>
</div>
</div>
</div>

Answer 1

将元素嵌套到一个父元素中，并根据需要向父元素声明定位和对齐规则。

<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<div>
<div>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px; max-width: 35%;">E-mail: <a href="mailto:[e-mail]">[e-mail]</a></p>
</div>
</div>
</div>
</div>

Answer 2

您可以通过两种方式实现它。 首先将它们都放在一个段落中，并带有float:right.

1. 您可以使用text-align: right;到<p>以使它们正确对齐。

<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 200px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px; max-width: 35%; text-align: right;">
E-mail: 
<br> [e-mail]
</p>
</div>
</div>

2. 在<p>内部使用带有"电子邮件："float: right的<span>，使其在向右浮动的段落内向右浮动。

<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 200px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px; max-width: 35%;">
<span style="float:right">E-mail: </span>
<br> [e-mail]
</p>
</div>
</div>

No.1 是更好的解决方案，因为默认情况下文本是左对齐的，这就是导致问题的原因，而不是文本没有向右浮动。

Answer 3

<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<div>
<div style="font-size: 14px; color: white; float: right; padding-right: 10px;text-align:right">
<p>E-mail</p>
<p>[e-mail]</p>
</div>
</div>
</div>
</div>

仅向一个div 添加样式