I'm currently working with some nav-tabs and attempting to place two a tags within one of the li elements that represent a tab. However, I'm facing an issue where the a tags are appearing on separate lines. I've tried using inline styling for the a tags, but it doesn't seem to be working. Any suggestions on how I can ensure that both a tags display on the same line?
You can view my jsfiddle here: https://jsfiddle.net/aaronmk2/DTcHh/51099/
Below is the HTML code snippet:
<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>
And here is the accompanying CSS code:
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.test{
display: inline;
}
.test1{
display: inline;
}