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

时间:2016-04-27 06:21:42

标签: html css twitter-bootstrap

我正在尝试将buttonli与按钮放在同一行。

这里是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>

5 个答案:

答案 0 :(得分:2)

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

here is the fiddle

.btn__align {
  display: inline-block;
}

.ul__element {
  display: inline-block;
}

答案 1 :(得分:1)

将班级向左拉添加到按钮

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

答案 2 :(得分:0)

你可以通过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>

答案 3 :(得分:0)

尝试在按钮处添加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>

答案 4 :(得分:0)

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

 display:inline-block;