html - 右对齐 float 文本

Question

尝试将 div 中的文本右浮动对齐

尝试在我的信息中添加标签，似乎可以使用电话号码，但如果我将其 float 正确，它就不起作用。

此外，当我的屏幕小于 400 像素时，信息文本似乎并未 100% 居中。

代码:

p span {
  display: inline-block;
  width: 100px;
}

.responsive {
  display: inline-block;
  width: 100%;
}

.responsive .left {
  float: left;
  width: 50%;
}

.responsive .right {
  float: right;
  text-align: right;
  width: 50%;
}

@media (max-width: 400px) {
  .responsive .left,
  .responsive .right {
    width: 100%;
    text-align: center;
  }
}

<div class="responsive">
  <div class="left">
    <h2>Infomation:</h2>
    <p>
      <span>Phone:    </span>(00) 00000000<br/>
      <span>Fax:      </span>(00) 00000000<br/>
      <span>Email:    </span><a href="mailto:contact@email.com ">contact@email.com<br/></a>
    </p>
  </div>

  <div class="right">
    <h2>Business Hours:</h2>
    <p>
      <span>Mon - Th:</span> 8:30 - 5:00<br/> <span>Friday:</span> 8:30 - 3:30<br/>
    </p>
  </div>
</div>

Answer 1

我要使用和更新 answer i gave earlier文本对齐:

.box, h1 {
  text-align: center;/* update*/
  }
  .box {
  background:linear-gradient(to left, gray 50%, silver 50%) /* see center*/
}
.left p {display:table;
margin:auto;
text-align:left;
}.left p span {
display:inline-block;
padding-right:3em
}
.left p span:nth-child(3) {padding-right:4em;}
.left p span:last-of-type {padding-right:1em}

@media screen and (min-width:399px) {
  .box {
    display: flex;
    justify-content: space-between;
    text-align: left;/* update*/
  }
  .text-right {
    text-align: right;
  }
}

<h1 style="font-size:3vw">Play me full page and resize window</h1>
<div class="box">
  <div class="left">
    <h2>Infomation:</h2>
    <p>
      <span>Phone:    </span>(00) 00000000<br/>
      <span>Fax:      </span>(00) 00000000<br/>
      <span>Email:    </span><a href="mailto:contact@email.com ">contact@email.com<br/></a>
    </p>
  </div>

  <div class="right text-right">
    <h2>Business Hours:</h2>
    <p>
      Monday - Thursday<br/> 8:30 - 5:00<br/> Friday <br/> 8:30 - 3:30<br/>
    </p>
  </div>
</div>