javascript - 使用 CSS 排列元素

Question

我一直在尝试将一个按钮放置在另一个按钮的右侧。上面是一个向您展示我的意思的例子。

我使用 Bootstrap 构建它。他们有一个导航栏功能，可以为我做布局。很棒的功能，但我不知道为什么它会不断产生新的行。我试过 right: 0 和定位，但都行不通。它每次都会留在同一个地方。我目前不知道是什么导致了这个错误。感谢您的宝贵时间!

我的 HTML 看起来像这样:

    <div id="navbar" class="navbar" style="position: relative; width: 93%;left: 3%;">

    <div class="navbar-inner">

    <div class="brand" style="padding-left: 0%;">
          <a href="www.investorsfortunes.com">
    <!--  <img class="img-polaroid" src="Images/logo.jpg"> -->
    Investorsfortunes.com 
      </a>
      </div>

  <ul class="nav" style="text-align: center">
  <li class="divider-vertical"><a href="#">Investors</a></li>
  <li class="divider-vertical"><a href="#">Deals</a></li>
  <li class="divider-vertical"><a href="#">Attornies</a></li>
  <li class="divider-vertical"><a href="#">Appraisers</a></li>

  </ul>


  <form class="form-inline">
    <input type="text" class="input-small" placeholder="Email">
    <input type="password" class="input-small" placeholder="Password">
   <button type="submit" class="btn floatRight">Sign in</button>
</form>

<!-- SIGN-UP AREA -->    
            <!-- Button to trigger modal -->
  <a href="#myModal" role="button" class="btn btn-primary floatRight" data- 
       toggle="modal">Sign-Up</a>

  <!-- Modal -->
  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-  
         labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-  
            hidden="true">x</button>
      <h3 id="myModalLabel">Sign-Up</h3>
    </div>
    <div class="modal-body">
    <form class="well span8">
 <div class="row">
    <div class="span3">
        <label>First Name</label>
        <input type="text" class="span3" placeholder="Your First Name">
        <label>Last Name</label>
        <input type="text" class="span3" placeholder="Your Last Name">
        <label>Email Address:</label>
        <input type="text" class="span3" placeholder="Your email address">
        <label>Password</label>
         <input type="password" id="inputPassword" placeholder="Password">
          <label>Retype Password</label>
         <input type="password" id="inputPassword" placeholder="Password">
    </div>
</div>
</form>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true"">Close</button>
      <button class="btn btn-primary" data-dismiss="modal">Save changes</button>
    </div>
  </div>

Answer 1

Form是 block 元素，是HTML。要么在表单中设置 Sign Up，要么将表单的样式设置为 inline-block

<form class="form-inline" style="display:inline-block;">