0

私は多くの同様のトピックを読み、提案を試みましたが、これを機能させることができないようです。私は自己学習者であり、親会社のウェブサイトを構築するだけの専門家ではなく、メニューに問題があります. これは IE と Firefox (少なくとも私が持っているバージョン) では問題なく動作しますが、Chrome と Safari は気に入りません。最初は Chrome では良さそうに見えますが、ズームアウトすると壊れてしまい、iPhone と iPad の Safari では、リストの最後の項目が残りの項目とインライン化されないため、さらに悪化します。私が読んだのは、white-space:nowrap; が必要だということです。私のコードではそうしていますが、それは役に立ちません.position属性でも遊んでいましたが、値はどれも機能しません。私のメニューの奇妙な点の 1 つは、各 li に id タグがあることですが、それは、各項目の上に別の画像を表示したいからです。それが私ができる方法です。助けていただければ幸いです、ありがとう

以下のウェブサイトとコードへのリンク: http://redcoral-lating.com/index_catalog_redcoral.php

サファリ iPhone:

サファリ iPhone

HTML:

<div id="navbar">
<ul>
<li id="zero"><a href="/index_catering_redcoral.php"> за нас</a></li>

<li id="one"><a  href="/redcoral_services.php"> услуги</a></li>

<li id="two"><a  href="/redcoral_cuisine.php">нашата кухня</a></li>

<li id="three" ><a href="/redcoral_gallery.php">галерия</a></li>

<li id="four"><a  href="/redcoral_movies.php">филми</a></li>

<li id="five"><a  href="/redcoral_celebs.php">кой се е хранил при нас?</a> </li>

<li id="six"><a  href="/redcoral_contacts.php">контакти</a>  </li>

CSS:

#navbar {
width: 894px;
height: 57px;
margin: 0px auto;
padding-left:25px;
padding-top:1px;
/*clear:both;*/
white-space:nowrap;

}


#navbar ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  list-style: none;
   margin: 0;
  padding: 0;
  width:100%;
}
#navbar ul li {
 /* display: block; */
  display: inline-block;
  position: relative;
  float: left;
 /* border-right: 1px solid #1A1A18;*/
}
#navbar ul li ul { display: none; }

#zero{
background-image: url(images/menu/short.png);
}
#one{
background-image: url(images/menu/short.png);
}
#two{
background-image: url(images/menu/short.png);
}
#three{
background-image: url(images/menu/short.png);
}
#four{
background-image: url(images/menu/short.png);
}
#five{
background-image: url(images/menu/short.png);
}
#six{
background-image: url(images/menu/short.png);
}
#seven{
background-image: url(images/menu/short.png);
} 


#navbar ul li a {
  display: block;
  height: 42px;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
 font-family: Calibri, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #851212;
    border: none;
  padding: 10px 28px 5px 28px;

}
#zero a:hover { background-image: url(images/menu/22.png); }
#one a:hover { background-image: url(images/menu/22.png);}
#two a:hover { background-image: url(images/menu/24.png);}
#three a:hover { background-image: url(images/menu/22.png);}
#four a:hover { background-image: url(images/menu/22.png);}
#five a:hover { background-image: url(images/menu/23.png);}
#six a:hover { background-image: url(images/menu/26.png);}


 #navbar ul li a:hover { 
    color: #DF0101;}
4

1 に答える 1

0

次の設定を適用してみてください。

html, body { 
    margin:0; 
    padding:0; 
}
#navbar {
    width: 857px; /* updated width to center properly */
    height: 57px;
    margin: 0px auto;
    /*padding-left:25px;*/
    padding-top:1px; 
    white-space:nowrap; 
}

#navbar ul li a {
    display: block;
    height: 42px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: Calibri, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #851212;
    border: none;
    padding: 10px 26px 5px 26px; /* decreased padding very slightly */
}

また、ヘッダーに次のメタ タグを配置してみてください。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

それで問題が解決するかどうか教えてください。

于 2013-08-18T02:32:51.653 に答える