html - 如何在 CSS 中重新定位此菜单？

Question

我正在修改模板中的 CSS/HTML 代码，该模板将导航按钮放置在背景中的横幅图像上方。该模板还使用媒体查询在浏览器窗口缩小时更改导航按钮的外观和位置。

我的主要问题是将导航菜单移动到横幅图像的右侧。菜单的位置设置为“相对”top:0,left:0。当我将菜单向左移动20个像素时，缩小版的菜单也向左移动20个像素。

我很想知道在不移动平板电脑和移动设备 View 中的菜单的情况下，在桌面 View 中将菜单定位到右侧的最佳方法。

1. 我正在使用 Foundation 5 色谱柱。
2. 菜单和横幅图片嵌套在一个 12 列的 div 中。
3. 菜单的 z-index 为 1000，位于横幅上方。
4. float 菜单会使横幅图片错位。

感谢您的帮助!

CSS:

 #banner-nav0 {
 width:23%;
 background: url(white80.png) repeat;
 height: 357px !important;
 }

 #banner-nav {
 z-index:100;
 list-style: none;
 overflow: hidden;
 }

 #banner-nav li a {
 font-size: 1.1em;
 border-bottom:1px solid #FFFFFF;
 color:#4d4f53!important;
 display:block;
 font-family:Verdana,sans-serif;
 font-weight:normal!important;
 text-decoration:none;
 text-shadow:0 1px 1px #FFFFFF;
 padding:5%;
 }

 #banner-nav li a:hover,#banner-nav li a:active {
 background:url(img/common/home-slider-current.jpg) no-repeat;
 background-color: #4d4f53;
 color:#FFF!important;
 text-shadow:0 1px 1px #000;
 } 

 .banner-wrapper {margin-top: -357px !important;}

 #banner-nav li img {
  margin: 0 auto;
  position: relative;
  left: 6%;
  } 

 /* MEDIA QUERIES */ 

@media only screen and (min-width: 480px) and (max-width: 900px) {
#banner-nav0 {
width: 100%;
height: 20px !important;
position: relative; 
left: 0px; 
top: 0px;
}

#banner-nav li {
display: inline-block;
margin: 5px;
}
#banner-nav li a {
font-size: 1.6vw;
padding: 0.3em 0.5em !important;
}
#banner-nav li a:hover {
border-radius: 5px;
}
.banner-wrapper {margin-top: 25px !important;
}
#banner-nav li img {
display: none;
}
}

@media only screen and (max-width: 479px) {
.banner-wrapper {display: none;}
#banner-nav0 {
width: 100% !important;
height: auto !important;
position: relative; 
left: 0px; 
top: 0px;
}
#banner-nav {width: auto;}
#banner-nav li a {
font-size: 3vw;
padding: 5px;
}
#banner-nav li img {
display: none;
}
}

HTML

侧边栏栏区

<section class="large-9 columns">

    <div class="large-12 columns">

        <div id="banner-nav0" style="position: relative; left: 0px; top: 0px; height: 0px; z-index: 1000">
                <ul id="banner-nav">
                <li><a href="#" title="How to Apply">How to Apply</a></li>
                <li><a href="#" title="Course Modules">Course Modules</a></li>
                <li><a href="#" title="Resources">Resources</a></li>
                <li><a href="#" title="For Faculty">For Faculty</a></li>
                </ul>
            </div>

            <div class="banner-wrapper">
                    <img src="Banner2.gif" alt="IPC Banner">
            </div>
    <!--   <div class="row">
    <div class="large-12 columns">            
            </div>
    </div> -->
    </div>

Answer 1

我没有足够的声誉来发表评论，所以我只是发布一个我猜的答案。

您想根据正在查看的设备对表格进行不同的定位吗？如果设备是移动设备，您是否考虑过将不同的类应用到菜单？

例如，如果屏幕宽度小于 699px，这将为元素分配一个类 -

 <script>
        window.onload = "functionzero()"
        {
            if (screen.width <= 699) {
            var elem = document.getElementById("menu");
            elem.className = "mobile"; }
        }
    </script>

然后您就可以拥有类“.mobile”并根据自己的喜好对其进行编辑。