How to display text / button at the end of tabs component using Bootstrap?
Question
I've added a text and a button inside <ul> tag like this:
<body>
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#">Database</a></li>
<li role="presentation"><a href="#">Tasks</a></li>
<li role="presentation"><a href="#">Options</a></li>
<li role="presentation">Welcome, ${sessionScope.currentUser} <button type="submit" >Log out</button></li>
</ul>
</div>
</body>
And the result is:
If I wrap the text and the button inside <a> tag then the bottom line is pushed too far away. You can see there is a line at the bottom of "Database" tab.
I want the text and the button move to the end of the tabs component like the tabs of this forum. The text "2 Answers" has the same height with the tab "votes" and is in the edge of the tabs pane:
I know that I have to modify it with JavaScript, but I don't know how to do it.
2 answers
solution1
5 2014-11-11 05:00:52
Here's the answer and the result for you.
You can check it out here http://jsfiddle.net/vyy3zszj/
Or just take below
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> <style type="text/css"> li.rightside { float:right; line-height:34px; } </style> <div class="container"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#">Database</a></li> <li role="presentation"><a href="#">Tasks</a></li> <li role="presentation"><a href="#">Options</a></li> <li class="rightside" role="presentation">Welcome, CurrentUser <button type="submit" >Log out</button></li> </ul> </div>
Somehow the defined css in this code snippet doesn't work. So I inserted above the body. FYI, you can use inline style for sure.
solution2
1 ACCPTED 2014-11-11 04:57:29
If I am understanding you correctly , you just would like the last 2 <li> elements all the way to the right , and the remaining ones to stay all the way to the left. To accomplish set the style of the last 2 <li> elements to "float:right"
replace this HTML with the existing HTML :
<body>
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#">Database</a></li>
<li role="presentation"><a href="#">Tasks</a></li>
<li role="presentation" style="float:right;"><a href="#">Options</a></li>
<li role="presentation" style="float:right;line-height:45px;">Welcome, ${sessionScope.currentUser}<button type="submit" >Log out</button></li>
</ul>
</div>
</body>`
UPDATED CODE , There are many ways to vertically align text, you can use vertical-align , line-height , padding 's , and margin 's. I adjusted the line-height to set the text in the middle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.