这是我要构建的HTML表单。这是为了生成报告以记录我们从客户那里购买的产品。
我正在尝试将这些字段放在中心的同一行：
到目前为止，我的代码如下：
[ 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>
最后，这是我的文本字段/字体的样子：
我从头开始接触HTML和CSS编程。
答案 0 :(得分：0)
您似乎已经开始进行格式化。我认为您要寻找的工具是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"代表“客户项目”。
答案 1 :(得分：0)
<div>标签将要放在同一行的元素包裹起来display: flex; flex-direction: row; 请在下面看到我的示例-我注释掉了标签，为占位符指定了正确的名称，还为div标签提供了边距值以进行清晰显示，以便您可以根据需要还原它们。
答案 2 :(得分：0)
您应该将输入标签和标签标签包裹在同一个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
答案 3 :(得分：0)
您可以为此使用浮点数。一种真正的基本方法是将两个输入都向左浮动，就像我的示例一样，这将有效地将它们彼此紧挨着。
.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>