[英]Arranging elements using CSS
我一直在嘗試將一個按鈕定位在另一個按鈕的右側。 上面的例子向您展示了我的意思。
我使用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>
形式是一個塊元素,是HTML。 在表單內設置“注冊”或將表單的樣式設置為內聯式
<form class="form-inline" style="display:inline-block;">
您正在使用Twitter Bootstrap,所以也許您可以使用
<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
只需將您的代碼放入表單即可。 像那樣...
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.