0

我阅读了许多类似的主题并尝试了这些建议，但似乎我无法让它发挥作用。我是一个自学者，而不是专业人士，只是为我父母的公司建立一个网站，我的菜单有问题。这在 IE 和 Firefox（至少我拥有的版本）中运行良好，但 Chrome 和 Safari 不喜欢它。最初在 Chrome 中它看起来不错，但如果你缩小它会破坏它，而在 iPhone 和 iPad 的 Safari 中它更糟糕，因为我列表中的最后一个项目永远不会与其余项目内联。我读到的是我需要有 white-space:nowrap; 在我的代码中，但它没有帮助，我也在使用位置属性，但没有一个值起作用。也许关于我的菜单的一个奇怪的事情是每个 li 都有一个 id 标签，但那是因为我想要一个不同的图像悬停在每个项目上，那 这是我可以做的事情的方式。我真的很感激一些帮助，谢谢

链接到下面的网站和代码：http ://redcoral-catering.com/index_catering_redcoral.php

苹果浏览器：

苹果浏览器

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

Try applying the following settings:

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 */
}

Also try placing this meta tag in your header:

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

Let me know if that solves the issue.

于 2013-08-18T02:32:51.653 回答