Bootstrap:一行两个元素

Question

我有一个问题与我的验证图标。所以我实际上想要的是像Twitter或Facebook上的验证图标在用户名之外，而不是在我的用户名下一行。但这行不通。

<ul class="line">
     <li>
        <h3 align="center">Username</h3>
        <span class="label label-info">
           <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
        </span>
     </li>
 </ul>

这是我的CSS:

li.line {
    list-style: none;
}
ul.line {
    display: block;
}

Answer 1

h3 is a block element

改为inline element

<ul class="line">
  <li>
     <span align="center">Username</span>
     <span class="label label-info">
        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 
     </span>
  </li>
</ul>

Answer 2

如果您不想要列表点，那么我认为您不会想要使用li。span甚至是div可能会给你你想要的样子。

至于让它们在同一行，请尝试为css显示元素使用inline-block选项。它类似于display: block，但是它允许您将元素保持在同一行。