html - 以移动问题为中心的CSS

Question

在大屏幕上，我的电话号码位于 Logo 的左侧。那工作正常。 在较小的屏幕上，我希望电话号码位于 Logo 下方。那是行不通的。

这对我不起作用:

这是一个更新。但我不认为 padding-right 是正确的解决方案。

<style>
  @media handheld, only screen and (max-width: 767px) {

    .phone { text-align: center; 
     padding-right:70px;

   }
     </style>

   <h3 class="phone" style="float:right;margin-top:30px;"><a href="mailto:info@elementive.com">info@elementive.com</a> | 720-897-8705</h3>

我该如何解决这个问题？

Answer 1

您的类选择器中缺少点 (.)。

<style>
  @media handheld, only screen and (max-width: 767px) {

     h3.phone {

      text-align: center;

      clear: both;

      padding: 20px 0 0;

      float: none;

    }

   }
 </style>

还有 span是内联元素，而 <h3>是一个 block 元素，所以你应该将跨度添加到 h3 或者只使用你在 <h3> 上应用的类和样式标签!