Question

我在<ul>标记内添加了一个文本和一个按钮，如下所示：

<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>

结果是：

如果我将文本和按钮包裹在<a>标记内，则底线被推得太远。您可以看到“数据库”选项卡底部有一行。

我希望文本和按钮移动到标签组件的末尾，就像此论坛的标签一样。文本“2 Answers”与选项卡“votes”具有相同的高度，位于选项卡窗格的边缘：

我知道我必须使用JavaScript修改它，但我不知道该怎么做。

Answer 1

这里是你的答案和结果。

您可以在此处查看http://jsfiddle.net/vyy3zszj/

或者只需在下面

＆＃13;

<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>

＆＃13;

不知何故，此代码段中定义的css无法正常工作。所以我插在身体上方。仅供参考，您可以使用内联样式。

Answer 2

如果我正确理解你，你只希望最后2个<li>元素一直向右，其余元素一直保持在左边。要完成，请将最后2个<li>元素的样式设置为"float:right"

将此HTML替换为现有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>`

更新后的代码，垂直对齐文字的方法有很多，您可以使用vertical-align，line-height，padding和margin。我调整了line-height以设置中间的文字

如何使用Bootstrap在选项卡组件的末尾显示文本/按钮？

2 个答案: