Question

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

这对我不起作用：

这是一次更新。但我不认为填充权是正确的解决方案。

<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>是一个块元素，因此您应该将以太网添加到h3中，或者只使用您应用于它的类和样式。 <h3>代码！

以移动问题为中心的CSS

1 个答案: