0

在此处输入图像描述

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

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

3 回答 3

1

表单是块元素是HTML。在表单内设置 Sign Up 或将表单的样式设置为 inline-block

<form class="form-inline" style="display:inline-block;">
于 2013-03-22T14:52:54.023 回答
0

您正在使用 twitter bootstrap，所以也许您可以使用

<div class="btn-group">
    <button class="btn">Left</button>
    <button class="btn">Middle</button>
    <button class="btn">Right</button>
</div>
于 2013-03-22T14:54:12.883 回答
0

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

<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>
于 2013-03-22T15:27:22.313 回答