1

画像はIE7では縦に表示されるメニューリスト項目ですが、横に表示したいです。IE7 を除く他のすべてのブラウザーで完全に表示されるスマート ウィザード プラグイン (framestyle.css) を使用しています。

framestyle.css : これは、スマート ウィザード プラグインの css です。

.swMain ul.anchor {
 position:fixed;
  z-index:1099;
  display:inline;
  float:left;
  list-style: none;
  padding: 0px;  
  margin: 5px 5px 0 0;
}

.swMain ul.anchor li{ 
  position: relative; 
  margin: 0;
  padding: 0; 
  padding-top:3px;
  padding-bottom: 3px;
  clear:both;
  display:inline;
  float: none;  
}

.swMain ul.anchor li a {
  display:block;
  position:relative;
  float:left;
  margin:0;
  padding:3px;
  height:35px;
  width:146px;
  text-decoration: none;
  outline-style:none;
}

IE7.css : IE7 ブラウザーのメニュー リスト項目の css です。

.swMain ul.anchor {  
display:inline;
position:relative; 
list-style: none;
padding: 0px 0px 0px 0px;
margin: 10px 0px 0px 10px;
zoom:1;
float:left;
clear:both;
}

.swMain ul.anchor li{
  margin: 0;
  padding: -10px; 
  padding-top:0px;
  padding-bottom: 0px;
  clear:both;
  display:inline;
  float:left;   

}
.swMain ul.anchor li a {
  display:block;
  position:relative; 
   float:left;
  margin:0px 0px 0px 0px;
  padding:3px 3px 3px 3px;
  text-decoration: none;
  outline-style:none;
}
4

1 に答える 1

0

何かを水平方向にインラインで表示したい場合はclear: both;、フローティング項目が新しい行に配置されるため、そもそもそうすべきではありません。

IE7 スタイルシートのfloat: left;fromも削除する必要があります。.swMain ul.anchor li

わかりやすくするために、次のコードはリスト項目を水平方向にインラインで配置します。

li {
display:inline;
}

いくつかのパディングやその他の派手なものでリスト項目をスタイルしたい場合は、 を試すことができますがinline-block、これは IE7 でいくつかの問題を引き起こします。ここで解決策を見つけることができます。

ところで、私はいくつかの特定の目的のプロジェクトで IE7 をサポートする必要がありましたが、一般的には IE7 のサポートを完全に取り下げる可能性があります。

お役に立てれば。

于 2013-11-23T18:16:31.910 に答える