javascript - How to display text / button at the end of tabs component using Bootstrap? -



javascript - How to display text / button at the end of tabs component using Bootstrap? -

i've added text , button within <ul> tag 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 result is:

if wrap text , button within <a> tag bottom line pushed far away. can see there line @ bottom of "database" tab.

i want text , button move end of tabs component tabs of forum. text "2 answers" has same height tab "votes" , in border of tabs pane:

i know have modify javascript, don't know how it.

if understanding correctly , lastly 2 <li> elements way right , , remaining ones remain way left. accomplish set style of lastly 2 <li> elements "float:right"

replace html 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 many ways vertically align text, can utilize vertical-align , line-height , padding's , , margin's. adjusted line-height set text in middle

javascript html css twitter-bootstrap

Comments

Popular posts from this blog

assembly - What is the addressing mode for ld, add, and rjmp instructions? -

vowpalwabbit - Interpreting Vowpal Wabbit results: Why are some lines appended by "h"? -

Is there a way to convert an HTML page styled with Bootstrap CSS into email-compatible html? -