Question

我正在尝试下载导航（使用Bootstrap 3），其中链接文本在同一行上有多个不同的对齐方式。

在下面的代码中，Dropdown A中的链接在HTML中有空格字符以对齐它们，但是忽略了空格（我知道这在语义上也很糟糕）。

我试图将导航菜单设置为Dropdown B和Dropdown C，但是使用空格而不是句点。

在下拉列表B中，有一个左对齐的第一个部分（Foo），然后是左对齐的第二个部分（条形图），但是之间有一个模拟的制表符。

在Dropdown C中，第一个部分（Foo）左对齐，第二个部分（Bar）右对齐，并且模拟制表符之间。

我尝试将Foo放在跨度和条形图中，然后使用浮动或文本对齐来移动它们，但是我尝试过的所有不同的东西都会导致条形图部分浮出菜单或下降到新线（看起来很糟糕）。

如何使用语义良好的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;
}

带有多个文本对齐的导航栏下拉链接（Bootstrap）

1 个答案: