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

形式是一个块元素，是HTML。 在表单内设置“注册”或将表单的样式设置为内联式

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

Answer 2

您正在使用Twitter Bootstrap，所以也许您可以使用

<div class="btn-group">
    <button class="btn">Left</button>
    <button class="btn">Middle</button>
    <button class="btn">Right</button>
</div>

Answer 3

只需将您的代码放入表单即可。 像那样...

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

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