相关疑难解决方法(0)

我需要在导航元素之间添加分隔符.分隔符是图像.

我的HTML结构如下:ol> li> a> img.

在这里,我得出两个可能的解决方案

1. 要添加更多li标签进行分离(嘘!),
2. 在每个元素的图像中包含分隔符(这是更好的,但它使用户可以点击,例如,"主页",但是到"服务",因为它们是一个接一个,用户可能不小心点击分隔符属于"服务");

该怎么办？

此问题通过询问如何在视口大小导致的换行符处删除分隔符来扩展" 导航分隔符 ".

->       Item 1 | Item 2 | Item 3 | Item 4 | Item 5       <-

->  Item 1 | Item 2 | Item 3  <-
->      Item 4 | Item 5       <-

这是一个小提琴,显示管道如何保持在换行符:

小提琴.

我对仅限css的解决方案感兴趣,但如果它提供唯一可能的解决方案,则javascript是可以接受的.

这是我第一次在这里发帖提问.

我在网站设计上使用twitter bootstrap.我必须创建导航菜单,使其中列出的项目将与管道分开.我已经在这里找到了另一个类似的问题- 添加一个管式分离机在一个无序列表项目后,除非该项目是最后一行,我使用的,但他们应该项目不分开.

我需要得到的:http://prntscr.com/4br2lb

从我在这里找到的帖子实现代码后,我得到了这个:http://prntscr.com/4br2yj

这是我的代码:

HTML:

<div class="navbar navbar-default navbar-static-top header-menu">
        <div class="collapse navbar-collapse navHeaderMenuCollapse">
            <ul class="nav navbar-nav navbar-middle navbar-text" style="float:none;margin: 0 auto; display: table;table-layout: fixed;">
                <li><a href="#">HOME</a></li>
                <li><a href="#">AUTO</a></li>
                <li><a href="#">LIFE</a></li>
                <li><a href="#">HEALTH</a></li>
                <li><a href="#">BUSINESS</a></li>
                <li><a href="#">MORE...</a></li>
            </ul>
        </div>
    </div>

CSS:

ul li { 
float: left; }
ul li:after {
content: "|"; padding: 0 .5em; }

先感谢您!

我有一个ul li像这样的 HTML：

<ul id="menu-footer-menu" class="menu">
   <li id="menu-item-356" class="menu-item menu-item-type-taxonomy menu-item-356">
      <a href="http://example.com/link1/">Title 1</a>
      <span class="f_sep">|</span>
   </li>
   <li id="menu-item-357" class="menu-item menu-item-type-taxonomy menu-item-357">
      <a href="http://example.com/link2/">Title 2</a>
      <span class="f_sep">|</span>
   </li>
   <li id="menu-item-358" class="menu-item menu-item-type-taxonomy menu-item-358">
      <a href="http://example.com/link3/">Title 3</a>
      <span class="f_sep">|</span>
   </li>
</ul>

哪个输出像这样

Title 1 | Title 2 | Title 3 | 

所以通过CSS我想最后隐藏|。我尝试过这个，但它隐藏了所有|

#menu-footer-menu .f_sep:last-child{display:none}

我想要这样的最终输出

Title 1 | Title 2 | Title 3  

请注意：我的问题与这个问题无关，因为它是通过添加的|，但|我的 HTML 中已经有管道，所以我只想隐藏最后一次出现的情况。