html - 具有多个文本对齐方式的导航栏下 zipper 接(Bootstrap)

Question

我正在尝试制作一个导航下拉菜单(使用 Bootstrap 3)，其中链接文本在同一行上有多个不同的对齐方式。

在下面的代码中，下拉列表 A 中的链接在 HTML 中有空格字符来对齐它们，但是空白被忽略了(我知道这在语义上也是不好的)。

我试图让我的导航菜单像 Dropdown B 和 Dropdown C，但用空格而不是句点。

在下拉列表 B 中，有一个左对齐的第一部分 (Foo)，然后是左对齐的第二部分 (Bar)，但中间有一个模拟制表符。

在 Dropdown C 中，第一部分 (Foo) 左对齐，第二部分 (Bar) 右对齐，中间有一个模拟制表符。

我试过将 Foo 放在一个跨度中，将 Bar 放在不同的跨度中，然后使用 float 或文本对齐来移动它们，但是我尝试过的所有不同的方法要么导致 Bar 部分从菜单中 float ，要么下降到一个新的行(看起来很糟糕)。

如何使用语义良好的 HTML 和 CSS 让我的下拉菜单看起来像 Dropdown B 和 Dropdown C？

(注意:交互式代码在全屏模式下更好地说明了我的观点)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">My Site</a>
        </div>
        
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li><a href="#home">Link 1</a></li>
                <li><a href="#profile">Link 2</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown A <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Foooooooo   Baaaaar</a></li>
                        <li><a href="#">Foo         Bar</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown B <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Foooooooo........Baaaaar</a></li>
                        <li><a href="#">Foo....................Bar</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown C <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Foooooooo........Baaaaar</a></li>
                        <li><a href="#">Foo............................Bar</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

可能有很多方法可以做到这一点，但这似乎有效:

你的 LI 看起来像这样:

<li><a href="#"><div style="width:100%"><div class="col-xs-6 navItem leftItem">Foooooooo</div><div class="col-xs-6 navItem rightItem">Baaaaar</div></div></a></li>

条目的 CSS 是这样的:

.navItem{
    display:inline;
    padding:0;
}

.leftItem{
    text-align:left;
}

.rightItem{
    text-align:right;
}