Question

我想要我的电子邮件和电子邮件＆＃39;在右边对齐。我知道我的电子邮件会在左边更长。

＆＃13;

<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;">newtrendphotography23@gmail.com</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

＆＃13;

<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>newtrendphotography23@gmail.com</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

仅为一个div添加样式

Answer 2

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

<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:newtrendphotography23@gmail.com">newtrendphotography23@gmail.com</a></p>
      </div>
    </div>
  </div>
</div>

Answer 3

你可以通过两种方式实现它。首先将它们都放在float:right的一个段落中。

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

＆＃13;

<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> newtrendphotography23@gmail.com
    </p>
  </div>
</div>

＆＃13;

在<p>内使用<span>和{＃1}}在＆＃34;电子邮件：＆＃34;，以便它浮动到段落内的右侧漂浮到右边。

＆＃13;

float: right

＆＃13;

No.1是更好的解决方案，因为文本默认是左对齐的，这是造成问题的原因，而不是文本没有浮动到右边。

在不同的地方对齐多个文本

3 个答案: