1

/Bootstrap をベースとして使用して、メニューの l 要素の後にliメニュー ディバイダとして aを追加しようとしています。

コードはここにあります: http://jsfiddle.net/zBxAB/1/

スラッシュが次の行に折り返されていることがわかるように、私はこれを解決しようとしましたが、inline-blockこれは機能していません。

修正することは可能ですか？

（アンカータグを選択することで同じ動作を得ることができますが、可能であればそうしません。）

ありがとう

HTML:

<nav class="navbar nav-main">
                    <div class="navbar-inner">
                        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
                            </span>
                        </button>
                        <div class="nav-collapse">
                            <ul class="nav nav-pills"> <li class="portfolio"><a href=#o">Portfolio</a></li><li class="contact-me"><a href="#">Contact Me!</a></li><li class="last from-the-blog"><a href="#">From the Blog</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>

CSS:

.navbar .nav > li {
    display: inline-block;
}

.navbar li:after {
   content: "/"; 
   display: inline-block;   
}

.navbar li:last-child:after {
    content: "";
}
4

1 に答える 1

0

それが最善の方法かどうかはわかりませんが、絶対配置で行うことは可能です。

.navbar .nav > li {
    display: inline-block;
    position: relative;
}

.navbar li:after {
   content: "/"; 
   display: inline-block; 
   height: 12px;
   width: 6px;
   position: absolute;
   right: 0;
   top: 8px;  
}

.navbar li:last-child:after {
    content: "";
}
于 2013-07-23T03:58:51.673 に答える