标签和输入字段在同一行

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 p-t-90 p-b-30">
		<form>
<fieldset>

<!-- Form Name -->
<legend>Customer P.O.</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>

最后，这是我的文本字段/字体的样子：

Example 1

我从头开始接触HTML和CSS编程。

Answer 1

您似乎已经开始进行格式化。我认为您要寻找的工具是flexbox。这有点复杂，但是一段时间后它却变得非常强大且直观。从https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox开始，我想您很快就会拥有想要的表单布局！

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

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

name是提交表单时用来标识数据的内容，因此它们应描述字段中的内容。所以我建议他们匹配标签，例如name="customer-item"代表“客户项目”。

Answer 2

1. 用<div>标签将要放在同一行的元素包裹起来
2. 给div标签一起标记类名和flexbox属性 display: flex; flex-direction: row;

请在下面看到我的示例-我注释掉了标签，为占位符指定了正确的名称，还为div标签提供了边距值以进行清晰显示，以便您可以根据需要还原它们。

pull request

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，这样做更加清洁，因为它具有更大的灵活性。但是在现代浏览器中，弹性框仅是fully supported。

.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>