1

我的网站是 RTL 网站。我下载了使用 rtl 方向定制的 3.2.5。但是，该网站的导航使用粘性固定顶栏，以相反的顺序呈现导航链接，如屏幕截图所示： 在此处输入图像描述

顺序应如以下屏幕截图： 在此处输入图像描述

为了获得第二个所需的屏幕截图，我尝试在 app.css 中设置以下内容：

.top-bar ul>li {
float: right;
}

这里的问题出现在小屏幕中的切换顶栏上，其中切换顶栏箭头仅在展开菜单之前呈现，之后它在第一项下消失。请看以下屏幕截图：

在此处输入图像描述

当使用上述 CSS 在大屏幕中正确排序导航项时，上面的屏幕截图显示了小屏幕上的导航栏。它没有显示切换箭头！

以下屏幕截图显示了正确的切换栏，但在大屏幕上的顺序不正确： 在此处输入图像描述

以下是用于生成此导航的 HTML 代码：

           <div class="contain-to-grid fixed">
<nav class="top-bar">
<ul>   
  <li class="name"><h1><a href="#"></a></h1></li>
   <li class="toggle-topbar"><a href="#"></a></li>  
</ul>
  <section>
    <ul class="left">    
  <li class = "active"><a href="/quran/" class="selected"><img src="/quran/img/home.png" alt="" />الرئيسية</a></li>
  <li class = ""><a href="/quran/contacts" class=""><img src="/quran/img/contact.png" alt="" />اتصل بنا</a></li>
  <li class = ""><a href="/quran/pages/about" class=""><img src="/quran/img/about.png" alt="" />عن الموقع</a></li>
    </ul>
    <ul class="right">
  <li class="">  
<div class="row collapse">
  <form controller="qurans" class="" id="QuranSearchForm" method="get" action="/quran/search">  <div class="nine mobile-three columns">
              <input name="q" type="text" id="QuranQ" title="بحث!" class="inline" placeholder="كلمات البحث..." value="" />  </div>
  <div class="three mobile-one columns">
                <a href="#" id="searchbutton" class="button expand postfix" title="بحث!" >بحث!</a>
</div>
  </form>
</div>              
  </li>
</ul>
  </section>
</nav>
 </div>

这个问题中最奇怪的行为：当我尝试从与项目相关的foundation.min.css属性列表中Google chrome的inspect元素更改.top-bar ul>li浮动属性并将浮动更改为正确时，它两边都可以正常工作（在大屏幕上顺序正确，在小屏幕上会出现用于扩展和缩小菜单的切换箭头）！！！

现场演示可以在此链接中找到，但请注意，在生活演示中，搜索框位于左侧。即不像屏幕截图。

4

1 回答 1

1

最后我得到了取决于@media 查询的解决方案。我在app.css做了以下事情：

.top-bar ul>li{
  float:right;  
}
@media only screen and (max-width: 940px) { .top-bar ul>li{
  float:none;  
}

}

在上面的解决方案中，我在小屏幕的情况下使用@media 取消了 float:right。从此链接查看现场演示。

于 2013-04-03T15:02:06.533 回答