如何獲取HTML表單以使其與先前表單的右邊對齊？
[英]How can I get an HTML form to align to the right of a previous form?
問題描述
我有兩種HTML表單。 我希望第二個對齊第一個（而不是在其下方）的右邊。
我用“ display：inline-block;”擺弄（沒有雙關語）。
相關的CSS：
.form {
display: inline-block;
}
相關的HTML：
<form>
<label class="firstblocklabel">Traveler's name:</label>
<input class="firstblockinput" type="text" id="travelername" title="Last Name, First Name, Middle Initial" />
</br>
. . .
</form>
<form>
<label>Trip Number:</label>
<input type="text" id="tripnumber" title="If Applicable" />
</br>
</form>
整個shebang可以在這里看到。
是將這兩種形式放在桌子上的解決方案，還是有一種更優雅的元素解決方案？
6 個解決方案
解決方案1
2 2015-07-31 22:35:54
使用浮動...
form {
float: left
}
在第二個表格上粘貼一個float:right ，以使其與右側對齊。
解決方案2
1 2015-07-31 22:33:56
嘗試這個 ：
form {
display: inline-block;
vertical-align:top; // Added
}
解決方案3
1 2015-07-31 22:36:56
首先，您不小心使用了.form類，而不是將form用作選擇器。
其次，在窗體選擇器中添加vertical-align: top ，只要有空間，它就可以使其與第一個窗體的右邊對齊。
form {
display: inline-block;
vertical-align:top;
}
但是，如果您的視圖太窄，它將始終在下面滑動。
解決方案4
1 2015-07-31 22:38:05
您添加了一個。 （.form）表示選擇類，但您的html標記不包含類
因此刪除。 應該可以使您的表格正常工作。
form {
vertical-align:top;
display:inline-block;
}
解決方案5
1 2015-07-31 22:49:20
如何使用Bootstrap及其幫助程序類來完成此任務？ 特別是如果您已經加載了Bootstrap？ 可以使用其網格完成2列的布局。
解決方案6
1 已采納 2015-07-31 23:31:14
使用inline-block必須將寬度定義為inline，僅對瀏覽器說您不想跳至下一行。
最佳實踐是擁有一個容器，然后為每個要並排的元素放置一個百分比值，該值對應於100％除以列數。 示例：100％/ 2列構成各為50％的列； 100％/ 4列各占25％； 等等
確保您的列的padding / margin / border設置為0，否則將無法正常工作；如果需要填充，請將其放置在column元素內的子元素中。
舉例說明，一切都更好，所以這里是：
input{ width: 100%; margin: 5px 0 0 -2px; } form{ /* we can add geometry to our form */ border: 4px solid #ddd; margin: 6px; padding: 10px; } .container{ padding: 0; } .col{ vertical-align: top; display: inline-block; padding: 0; margin: 0; border: none; } .col:hover{ /* just to see it */ box-shadow: 0 0 2px 0px red; } .col-half{ width: 50%; } .col-quater{ width: 25%; }
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script> <meta charset="utf-8"> <title></title> </head> <body> <h1>example 1</h1> <div class="container"> <div class="col col-half"> <form class="" action="index.html" method="post"> <h3>Some form...</h3> <input type="text" name="name" value=""> <input type="text" name="name" value=""> <input type="text" name="name" value=""> <input type="text" name="name" value=""> <input type="text" name="name" value=""> </form> </div><div class="col col-half"> <form class="" action="index.html" method="post"> <h3>Another form...</h3> <input type="text" name="name" value=""> <input type="text" name="name" value=""> <input type="text" name="name" value=""> <input type="text" name="name" value=""> <input type="text" name="name" value=""> </form> </div> </div> <h1>example 2</h1> <div class="container"> <div class="col col-half"> <form class="" action="index.html" method="post"> <h3>1/2 form...</h3> <input type="text" name="name" value=""> <input type="text" name="name" value=""> <input type="text" name="name" value=""> <input type="text" name="name" value=""> <input type="text" name="name" value=""> </form> </div><div class="col col-quater"> <form class="" action="index.html" method="post"> <h3>1/4 form...</h3> <input type="text" name="name" value=""> <input type="text" name="name" value=""> <input type="text" name="name" value=""> <input type="text" name="name" value=""> <input type="text" name="name" value=""> </form> </div><div class="col col-quater"> <form class="" action="index.html" method="post"> <h3>Another 1/4 form...</h3> <input type="text" name="name" value=""> <input type="text" name="name" value=""> <input type="text" name="name" value=""> <input type="text" name="name" value=""> <input type="text" name="name" value=""> </form> </div> </div> </body> </html>
獎金：
通常，框架在網格系統上工作：如果以引導程序為例，它們在12列網格上工作。 這意味着，如果您使用的col-6 6類是12一半，那么您將獲得50％的寬度，並且所有其他尺寸都可以使用。 12非常靈活，網格中的cols越多，在我的示例中網格的可能性就越大（並且您必須編寫的CSS越多），我的網格數為4。我們可以為col-2和col-quater重命名col-half col-quater的col-1因此作為網格系統有意義
HTML格式右對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.