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>

使用CSS排列元素

3 个答案: