0

レスポンシブデザインでワードプレスのサイトを作っています。これで、マークアップは次のようになります

<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 >を< spanclass = "contact-number"> 123-456-7890</ span >に変更します

于 2012-11-28T13:44:17.587 に答える
0

div で負の margin-top を実行できます - ログイン

于 2012-11-28T13:40:19.687 に答える
0

さまざまなサイズのデバイスで問題なく動作しているコードを調べましたが、問題は、ネガティブで指定されたいくつかのマージン プロパティと、他の継承されたクラスに関連しています。

于 2016-05-17T07:21:14.427 に答える