0

我正在做一个响应式设计的 wordpress 网站。现在我的标记是这样的

<div class="contact-wrap">
  <div class="contact-number">123-456-7890</div><!--.contact-number-->
  <div class="user-login"><a href="#"><span class="login-icon">Login</span></a></div><!--.user-login-->
</div>

而css是这样的

.contact-wrap {
  padding: 0;
  margin: 25px 0 0 0;
  overflow: hidden;
}
.contact-wrap .contact-number {
  background-image: url('images/contact-icon.png');
  background-position: 0 7px;
  background-repeat: no-repeat;
  color: #d4001a;
  font-size: 22px;
  font-weight: bold;
  padding: 0 0 0 24px;
  float: left;
}
.contact-wrap .user-login {
  padding: 4px 0 0 0;
  float: right;
}
.user-login a {
  background-image: url('images/login-bg-sprited.png');
  background-position: 0 -27px;
  background-repeat: no-repeat;
  padding: ;
  width: 62px;
  height: 27px;
  display:inline-block;
  padding: 0 0 0 4px;
}

现在，由于该站点将处于响应状态，它正在寻找 960 像素和更大的屏幕，但是当我调整屏幕大小时，联系人号码的背景图像不是很好。这是更大屏幕的屏幕截图。 在此处输入图像描述

这是屏幕尺寸320X480.

在此处输入图像描述

所以有人可以告诉我这里出了什么问题。任何帮助和建议都将不胜感激。

4

3 回答 3

0

我测试了您发布的代码，它在所有桌面浏览器中都可以正常工作，甚至 IE

测试

您的问题出在您发布的代码周围，可能是某种继承的样式。您可以尝试以下几件事：

将选择器.contact-wrap .contact-number更改为简单的 .contact-number

将< div class="contact-number">123-456-7890</ div >改为< span class="contact-number">123-456-7890</ span >

于 2012-11-28T13:44:17.587 回答
0

你可以在 div 上做一个负边距顶部 - 登录

于 2012-11-28T13:40:19.687 回答
0

我已经浏览了它在不同尺寸的设备上运行良好的代码，它的问题可能与负数上给出的一些边距属性以及其他继承的类有关。

于 2016-05-17T07:21:14.427 回答