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
Post a Comment