Question

我正在尝试将button和li与按钮放在同一行。

这里是fiddle

  <button type="submit" class="btn btn-gray btn-sm">Log In</button>
     <ul>
         <li style="list-style-type:none;">
          <a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password?
          </a>
         </li>
     </ul>

Answer 1

您可以通过两种方式执行此操作，display: inline-block;或float: left;在这种情况下，我执行了display属性。请注意，为了清晰起见，我还添加了两个模型类，您可以将它们更改为

here is the fiddle

.btn__align {
  display: inline-block;
}

.ul__element {
  display: inline-block;
}

Answer 2

将班级向左拉添加到按钮

<button type="submit" class="btn btn-gray btn-sm pull-left">Log In</button>

<ul>
 <li style="list-style-type:none;"><a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password?</a></li>

Answer 3

你可以通过div或表来做到这一点 https://jsfiddle.net/j538zkwh/5/

  <table >
            <td>
                <td>
                 <button type="submit" class="btn btn-gray btn-sm">Log In</button> <a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password? </a>
                 </td>
         </tr>
               </table>

Answer 4

尝试在按钮处添加pull-left类将解决问题也找到下面发布的代码...

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button type="submit" class="btn btn-gray btn-sm pull-left" >Log In</button>
<ul>
  <li style="list-style-type:none;">
    <a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password?
    </a>
  </li>
</ul>

Answer 5

简单方法是将此添加到您的css代码

 display:inline-block;

将按钮和li标签对齐在同一水平线上

5 个答案: