標簽和輸入字段在同一行

Question

這是我要構建的HTML表單。 這是為了生成報告以記錄我們從客戶購買的產品。

我正在嘗試將這些字段放在中心的同一行上：

• 名字和姓氏
• ID類型和文件上傳
• 客戶物料和Checkmend參考編號
• 化妝品等級和成本。

到目前為止，我的代碼如下：

  [ FONT ]*/ @font-face { font-family: Oswald-Regular; src: url('../fonts/oswald/Oswald-Regular.ttf'); } @font-face { font-family: Oswald-Medium; src: url('../fonts/oswald/Oswald-Medium.ttf'); } @font-face { font-family: Oswald-Bold; src: url('../fonts/oswald/Oswald-Bold.ttf'); } /*////////////////////////////////////////////////////////////////// [ RESTYLE TAG ]*/ * { margin: 0px; padding: 0px; box-sizing: border-box; } body, html { height: 100%; font-family: Oswald-Regular, sans-serif; } /*---------------------------------------------*/ a { font-family: Oswald-Regular; font-size: 14px; line-height: 1.7; color: #666666; margin: 0px; transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; } a:focus { outline: none !important; } a:hover { text-decoration: none; color: #111111; } /*---------------------------------------------*/ h1,h2,h3,h4,h5,h6 { margin: 0px; } p { font-family: Oswald-Regular; font-size: 14px; line-height: 1.7; color: #666666; margin: 0px; } ul, li { margin: 0px; list-style-type: none; } /*---------------------------------------------*/ input { outline: none; border: none; } input[type="number"] { -moz-appearance: textfield; appearance: none; -webkit-appearance: none; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; } textarea { outline: none; border: none; } textarea:focus, input:focus { border-color: transparent !important; } input::-webkit-input-placeholder { color: #43383e;} input:-moz-placeholder { color: #43383e;} input::-moz-placeholder { color: #43383e;} input:-ms-input-placeholder { color: #43383e;} textarea::-webkit-input-placeholder { color: #43383e;} textarea:-moz-placeholder { color: #43383e;} textarea::-moz-placeholder { color: #43383e;} textarea:-ms-input-placeholder { color: #43383e;} /*---------------------------------------------*/ button { outline: none !important; border: none; background: transparent; } button:hover { cursor: pointer; } iframe { border: none !important; } /*////////////////////////////////////////////////////////////////// [ Utility ]*/ .txt1 { font-family: Oswald-Bold; font-size: 20px; color: #333333; line-height: 1.2; } .txt2 { font-family: Oswald-Regular; font-size: 16px; color: #999999; line-height: 1.4; } .txt3 { font-family: Oswald-Regular; font-size: 16px; color: #333333; line-height: 1.2; text-transform: uppercase; } .bg1 {background-color: #3b5998;} .bg2 {background-color: #1da1f2;} .bo1 {border-bottom: 1px solid #929292;} .hov1:hover { border-bottom: 1px solid #111111; color: #111111; } /*////////////////////////////////////////////////////////////////// [ login ]*/ .limiter { width: 100%; margin: 0 auto; } .container-login100 { width: 100%; min-height: 100vh; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 15px; position: relative; background-color: #e6e6e6; } .wrap-login100 { width: 320px; background: transparent; border-radius: 0px; } /*================================================================== [ Form ]*/ img { position:relative; top:50%; left:50%; transform:translate(-50%, -50%); } .login100-form { width: 100%; position: center; } .login100-form-title { font-family: Oswald-Medium; font-size: 30px; color: #43383e; line-height: 1.2; text-align: center; display: block; } /*------------------------------------------------------------------ [ Button Login with ]*/ .btn-login-with { font-family: Oswald-Medium; font-size: 16px; color: #fff; line-height: 1.2; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; border-radius: 25px; } .btn-login-with i { font-size: 20px; margin-right: 10px; } .btn-login-with:hover { color: #fff; background-color: #333333; } /*------------------------------------------------------------------ [ Input ]*/ .wrap-input100 { width: 100%; background-color: #fff; border-radius: 31px; position: relative; z-index: 1; } .input100 { font-family: Oswald-Medium; font-size: 16px; color: #43383e; line-height: 1.2; position: relative; display: inline; width: 100%; height: 62px; background: #fff; border-radius: 31px; padding: 0 35px 0 35px; } /*------------------------------------------------------------------ [ Focus Input ]*/ .focus-input100 { display: block; position: absolute; z-index: -1; width: 100%; height: 100%; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); border-radius: 31px; background-color: #fff; pointer-events: none; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .input100:focus + .focus-input100 { width: calc(100% + 20px); } /*---------------------------------------------*/ .btn-show-pass { font-size: 15px; color: #aaaaaa; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; position: absolute; z-index: 200; height: 100%; top: 0; right: 25px; padding: 0 5px; cursor: pointer; -webkit-transition: background 0.4s; -o-transition: background 0.4s; -moz-transition: background 0.4s; transition: background 0.4s; } .btn-show-pass:hover { color: #111111; } .btn-show-pass.active { color: #111111; } /*------------------------------------------------------------------ [ Button ]*/ .container-login100-form-btn { width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: center; } .login100-form-btn { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; padding: 0 20px; min-width: 160px; height: 62px; background-color: transparent; border-radius: 31px; font-family: Oswald-Regular; font-size: 16px; color: #fff; line-height: 1.2; text-transform: uppercase; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; position: relative; z-index: 1; } .login100-form-btn::before { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); border-radius: 31px; background-color: #333333; pointer-events: none; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .login100-form-btn:hover:before { background-color: #222222; width: calc(100% + 20px); } /*------------------------------------------------------------------ [ Alert validate ]*/ .alert-validate .btn-show-pass { visibility: hidden; } .validate-input { position: relative; } .alert-validate::before { content: attr(data-validate); position: absolute; z-index: 1000; max-width: 70%; background-color: #fff; border: 1px solid #c80000; border-radius: 14px; padding: 4px 25px 4px 10px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 10px; pointer-events: none; font-family: Oswald-Regular; color: #c80000; font-size: 13px; line-height: 1.4; text-align: left; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; -moz-transition: opacity 0.4s; transition: opacity 0.4s; } .alert-validate::after { content: "\\f06a"; font-family: FontAwesome; display: block; position: absolute; z-index: 1100; color: #c80000; font-size: 16px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 16px; } .alert-validate:hover:before { visibility: visible; opacity: 1; } @media (max-width: 992px) { .alert-validate::before { visibility: visible; opacity: 1; } } /*////////////////////////////////////////////////////////////////// [ Responsive ]*/ @media (max-width: 576px) { .wrap-login100 { padding-top: 20px } } 

 <?php require_once('auth.php'); ?> <!DOCTYPE html> <head> <title>Home | Alphabase</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--===============================================================================================--> <link rel="icon" type="image/png" href="images/icons/favicon.ico"/> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="fonts/Linearicons-Free-v1.0.0/icon-font.min.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css"> <!--===============================================================================================--> <link rel="stylesheet" type="text/css" href="css/util.css"> <link rel="stylesheet" type="text/css" href="css/main.css"> <!--===============================================================================================--> <p>Test</p> </head> <body> <center> <div class="limiter"> <div class="container-login100"> <div class="wrap-login100 pt-90 pb-30"> <form> <fieldset> <!-- Form Name --> <legend>Customer PO</legend> <!-- Text input--> <div> <label for="textinput">First Name</label> <div> <input class="input100" id="textinput" name="textinput" placeholder="placeholder" type="text"> </div> </div> <!-- Text input--> <div > <label for="texinput">Last Name</label> <div > <input class="input100" id="textinput" name="textinput" placeholder="placeholder" type="text"> </div> </div> <!-- Textarea --> <div > <label for="textarea">Address</label> <div > <textarea id="textarea" name="textarea">default text</textarea> </div> </div> <!-- Text input--> <div > <label for="textinput">Post Code</label> <div> <input class="input100" id="textinput" name="textinput" placeholder="placeholder" type="text"> </div> </div> <!-- Text input--> <div > <label for="textinput">Contact Number</label> <div > <input class="input100" id="textinput" name="textinput" placeholder="placeholder" type="text"> </div> </div> <!-- Select Basic --> <div > <label for="selectbasic">ID Type</label> <div > <select id="selectbasic" name="selectbasic"> <option value="DriversLicence">Driver's Licence</option> <option value="Passport">Passport</option> <option value="VISA">VISA</option> <option value="Other">Other Government Issued ID</option> </select> </div> </div> <!-- File Button --> <div > <label for="filebutton">File Button</label> <div > <input id="ID" name="ID" type="file"> </div> </div> <!-- Text input--> <div > <label for="textinput">Customer Item</label> <div > <input class="input100" id="textinput" name="textinput" placeholder="placeholder" type="text"> </div> </div> <!-- Text input--> <div > <label for="textinput">Checkmend Ref #</label> <div > <input class="input100" id="textinput" name="textinput" placeholder="placeholder" type="text"> </div> </div> <!-- Select Basic --> <div > <label for="selectbasic">Cosmetic Grade</label> <div > <select id="selectbasic" name="selectbasic"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="Damaged">For Parts/Repair</option> </select> </div> </div> <!-- Text input--> <div > <label for="textinput">Cost</label> <div > <input class="input100" id="textinput" name="textinput" placeholder="placeholder" type="text"> </div> </div> <!-- Textarea --> <div > <label for="textarea">Other Notes</label> <div > <textarea id="textarea" name="textarea"></textarea> </div> </div> </fieldset> </form> </div> </div> </div> <!--===============================================================================================--> <script src="vendor/jquery/jquery-3.2.1.min.js"></script> <!--===============================================================================================--> <script src="vendor/animsition/js/animsition.min.js"></script> <!--===============================================================================================--> <script src="vendor/bootstrap/js/popper.js"></script> <script src="vendor/bootstrap/js/bootstrap.min.js"></script> <!--===============================================================================================--> <script src="vendor/select2/select2.min.js"></script> <!--===============================================================================================--> <script src="vendor/daterangepicker/moment.min.js"></script> <script src="vendor/daterangepicker/daterangepicker.js"></script> <!--===============================================================================================--> <script src="vendor/countdowntime/countdowntime.js"></script> <!--===============================================================================================--> <script src="js/main.js"></script> </body> </center> </html> </html> 

最后，這是我的文本字段/字體的樣子：

例子1

我是從頭開始接觸HTML和CSS編程的新手。

Answer 1

看起來您的格式化工作已經有了一個很好的開端。 我認為您要尋找的工具是flexbox。 這有點復雜，但是一段時間后它卻變得非常強大且直觀。 從https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox開始使用，我想您將立即擁有所需的表單布局！

我要注意的一件事是，您在input元素上使用了相同的name和id 。

通常，文檔中的所有id都必須是唯一的（除非使用JavaScript DOM操作，否則您可能不需要它們）。

提交表單時， name s是用來標識數據的，因此它們應該描述字段中的內容。 因此，我建議他們匹配標簽，例如，“ Customer Item”的name="customer-item" ”。

Answer 2

1. 用<div>標簽將要放在同一行的元素包裝起來
2. 給div標簽一個類名和flexbox屬性一起display: flex; flex-direction: row; display: flex; flex-direction: row;

請在下面查看我的示例-我注釋掉了標簽，為占位符指定了正確的名稱，還為div標簽提供了邊距值以進行清晰顯示，以便您可以根據需要還原它們。

http://jsfiddle.net/terryeah/hqnfv964/

Answer 3

您應該將輸入標簽和標簽標簽包裝在同一個div標簽中

 <div> <label for="input">What ever here</label> <input id="input" type="text"> </div> 

如果將輸入標簽包裝在自己的div上，則它會跳到新行，因為div是塊元素

  <label for="input">What ever here</label> <div> <input id="input" type="text"> </div> 

另外，我看到您對多個輸入標簽使用了相同的ID。 ID必須僅對一個標簽唯一。 多個標簽不能使用相同的ID

Answer 4

您可以為此使用浮點數。 一個真正的基本方法是將兩個輸入都向左浮動，這將像我的示例一樣有效地將它們彼此緊挨着。

 .inputWithLabel { float: left; } 

 <div> <div class="inputWithLabel"> <label for="test1">Test 1</label> <div> <input name="test1"/> </div> </div> <div class="inputWithLabel"> <label for="test2">Test 2</label> <div> <input name="test2"/> </div> </div> </div> 

您也可以為此使用flexboxes，這樣做更加清潔，因為它具有更大的靈活性。 但是，Flexbox僅在現代瀏覽器中完全受支持 。

 .flex-row { display:flex; flex-direction:row; } 

 <div class="flex-row"> <div class="inputWithLabel"> <label for="test1">Test 1</label> <div> <input name="test1"/> </div> </div> <div class="inputWithLabel"> <label for="test2">Test 2</label> <div> <input name="test2"/> </div> </div> </div>