Question

我有一些nav-tabs，我正在尝试在其中一个标签a标签中插入两个li标签。我遇到的问题是a标记出现在不同的行上。我试图内联a标签，但这似乎不起作用。我应该怎么做才能使a个标签位于同一行？

这是一个jsfiddle：https://jsfiddle.net/aaronmk2/DTcHh/51099/

这是我的Html代码：

<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-collapse collapse">
            <ul class="nav nav-tabs nav-justified" role="tablist">
                <li role="presentation" class="active test">
                    <a href="#" role="tab" data-toggle="tab" class="test1">View</a>
                     <a href="" class="test1"><i class="fa fa-question-circle" aria-hidden="true"></i></a>
                </li>
            </ul>
        </div>
    </div>
</div>

这是我的css

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}
.test{
  display: inline;
}
.test1{
  display: inline;
}

Answer 1

您可能应该在span标记中包含2个标记，并为其添加内联。

span{
  display: inline;
}

请参阅小提琴：https://jsfiddle.net/DTcHh/51103/

Answer 2

由于您需要两个<a>，因此您必须覆盖导航的默认Bootstrap样式。所以这样的事情会起作用：

ul > li > .test1 { 
  display: inline;
}

Bootstrap正在通过ul > li > a进行选择，因此您只想让它更具体。你也可以这样做：

.test1 {
  display: inline !important;
}

如何在导航标签导航选项卡内的li标签内部获取两个内联标签

2 个答案: