0

我很确定这是一个简单的解决方法，而且我经验丰富，无法弄清楚。我正在使用 WP 构建一个站点，但主页只是一个带有垂直导航菜单的背景图像。我现在不知道如何让所有浏览器和窗口的菜单保持在同一个位置。它在我的屏幕上看起来不错，然后我发现导航窗格在我丈夫的显示器上完全不同的位置。我相信这与位置、显示和边距有关，但是当我阅读这些内容时，我越来越迷茫，我只想有人告诉我代码。

该页面位于www.sydneyjanebaily.com

至此整个页面的代码如下：

身体{背景图片：网址（http://www.sydneyjanebaily.com/wp-content/themes/twentyeleven/images/open-book.png）；背景重复：不重复；背景附件：固定；背景位置：中心；

} 菜单 { 显示：块；}

访问 div { 显示：块；左边距：890px；边距右：自动；边距顶部：200px；宽度：235px；}

/ * ** * ** * ** * ** *导航* ** * ** * ** * / nav#access ul, nav#access li.pagenav { display: block; 列表样式：无；}

nav#access ul li a span, nav#access ul li.page_item a span { position: absolute; 正确：100%；顶部：2px；宽度：15px；高度：100%；背景图像：url（../images/nav-shadow.png）；背景位置：右上；背景重复：重复-y；}

nav#access ul li a, nav#access ul li a:visited, nav#access ul li.page_item a, nav#access ul li.page_item a:visited { display: block; 填充：8px 10px 8px 30px；白颜色; 字体：150% “EBGaramondSC”、“Palatino”、“Palatino Linotype”、“Book Antiqua”、Georgia、serif；文字装饰：无；/*背景颜色：

aba000; */ 边距：5px 0 7px 0; 位置：相对；宽度：235px；/ font-variant：小型大写字母；/ }

nav#access ul li a:hover, nav#access ul li a:focus, nav#access ul li.page_item a:hover, nav#access ul li.page_item a:focus{ 颜色：

FF0000; }

nav#access li a:hover span { background-color: #666; } nav#access ul li a em { font-size: 87.50%; } nav#access ul li:nth-child(5n-4) a, nav#access ul li:nth-child(5n-4) a span { ; } nav#access ul li:nth-child(5n-3) a, nav#access ul li:nth-child(5n-3) a span { ; } nav#access ul li:nth-child(5n-2) a, nav#access ul li:nth-child(5n-2) a span { ; } nav#access ul li:nth-child(5n-1) a, nav#access ul li:nth-child(5n-1) a span { ; } nav#access ul li:nth-child(5n-5) a, nav#access ul li:nth-child(5n-5) 跨度 {; } -->

nav#access ul li ul li span { 位置：绝对；正确：100%；顶部：0；宽度：20px；高度：100%；左：2px；右边距：15px；溢出：可见；} nav#access ul li ul li:nth-child(odd) a { 背景：无；颜色：#EEE8AA；字体大小：较小；边距：3px 20px 5px 20px；最小高度：20px；宽度：210px；填充：2px 0 2px 20px；} nav#access ul li ul li:nth-child(odd) a:hover, nav#access ul li ul li:nth-child(odd) a:focus { 背景: none; 颜色：#ADFF2F；字体大小：较小；左：15px；填充：2px 30px 2px 25px；} nav#access ul li ul li:nth-child(odd) a span { background: url(../images/sub-menu2.png) -5px 0px no-repeat; 宽度：30px；}

nav#access ul li ul li:nth-child(even) a { 背景：无；颜色：

3B3C1D; 字体大小：较小；边距：3px 20px 5px 20px；最小高度：20px；宽度：210px；填充：2px 0 2px 20px；} nav#access ul li ul

li:nth-child(even) a:hover, nav#access ul li ul li:nth-child(even) a:focus { 背景: none; 颜色：#FF4500；字体大小：较小；左：15px；填充：2px 30px 2px 25px；} nav#access ul li ul li:nth-child(even) a span { background: url(../images/sub-menu2.png) -5px 0px no-repeat; 宽度：30px；}

nav#access ul li ul li ul li:nth-child(odd) a { 背景：无；颜色：#FFD700；字体大小：较小；边距：3px 20px 5px 30px；最小高度：20px；宽度：200px；填充：2px 0 2px 20px；} nav#access ul li ul li ul li:nth-child(odd) a:hover, nav#access ul li ul li ul li:nth-child(odd) a:focus { background: none; 颜色：#EEE8AA；字体大小：较小；左：25px；填充：2px 30px 2px 25px；} nav#access ul li ul li ul li:nth-child(odd) a span { background: url(../images/sub-menu.png) -10px 0px no-repeat; 宽度：30px；}

nav#access ul li ul li ul li:nth-child(even) a { 背景：无；颜色：#3B3C1D；字体大小：较小；边距：3px 20px 5px 30px；最小高度：20px；宽度：200px；填充：2px 0 2px 20px；} nav#access ul li ul li ul li:nth-child(even) a:hover, nav#access ul li ul li ul li:nth-child(even) a:focus { 背景：无；颜色：#7FFFD4；字体大小：较小；左：25px；填充：2px 30px 2px 25px；} nav#access ul li ul li ul li:nth-child(even) a span { background: url(../images/sub-menu.png) -10px 0px no-repeat; 宽度：30px；}

nav#access ul li a:hover:active, nav#access ul li ul li a:hover:active, nav#access ul li ul li ul li a:hover:active, nav#access ul li a:focus:active, nav#access ul li ul li a:focus:active, nav#access ul li ul li ul li a:focus:active { 颜色：

00CCFF; 左：1px；顶部：1px;}

/* 单一导航 */

导航单{浮动：对；位置：相对；顶部：-0.3em；文本对齐：右；z-index：1；}

nav-single .nav-previous,

导航单 .nav-next { 浮动：无；宽度：自动；}

nav-single .nav-next { padding-left: .5em; }

    img.book {  
        /* Set rules to fill background */  
        min-height: 100%;  
        min-width: 1000px;  

        /* Set up proportionate scaling */  

        height: auto;  

        /* Set up positioning */  

        top: 0;  
        left: 0;  

      display: block;   
      margin-left: auto;  
      margin-right: auto; 
      text-align: center;
    } 

    </style>  

  <!-- <img class="book"src="<?php bloginfo('template_directory');?>/images/open-book.png" alt="xxx"

width="880" height="xxx" /> --> 

          <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
          <!-- <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content',

'二十一'）；?>"> "> --> '主要' ) ); ?>

我很困惑，当我使用 Firefox 开发人员工具检查一个元素时，它仍然会为我标记为块的内容显示内联元素。

基本上，我可以使用 px 将导航窗格放在我想要的位置，但它只在我的屏幕上看起来正确。我想我需要百分比，但这超出了我的范围。请帮忙。

谢谢，悉尼

4

1 回答 1

2

尝试替换这个：

#access div {
    display: block;
    margin-left:890px;
    margin-right:auto;
    margin-top:200px;
    width: 235px;  
    }

有了这个：

#access div {
   position: absolute;
   top: 20%;
   left: 50%;
}

无论我如何挤压或拉伸屏幕，它在我的显示器上都能正常工作，它也应该对你有用。祝你好运！

于 2012-05-22T18:38:05.340 回答