如何创建文本输入字段并排水平对齐的HTML/PHP表单
我已经成功地制作了一个表单，但是我希望文本输入字段水平地彼此相邻显示，而不是堆叠在一起 我已经提供了我的代码和表单当前外观的屏幕截图。。还有一个用Photoshop制作的模型，展示了我希望表单的外观 表单有5个文本输入字段和2个选择下拉字段 我不需要颜色样式或PHP的帮助，我可以对其进行排序，这只是我一直坚持的实际布局 如果有人能帮忙，我将不胜感激如何创建文本输入字段并排水平对齐的HTML/PHP表单,php,html,css,Php,Html,Css,我已经成功地制作了一个表单，但是我希望文本输入字段水平地彼此相邻显示，而不是堆叠在一起 我已经提供了我的代码和表单当前外观的屏幕截图。。还有一个用Photoshop制作的模型，展示了我希望表单的外观 表单有5个文本输入字段和2个选择下拉字段 我不需要颜色样式或PHP的帮助，我可以对其进行排序，这只是我一直坚持的实际布局 如果有人能帮忙，我将不胜感激 <?php // $query = "SELECT 'forename' FROM [Pulse].[dbo].[users]"; //
<?php
// $query = "SELECT 'forename' FROM [Pulse].[dbo].[users]"; // selects the correct table
$query = "SELECT forename FROM [Test].[dbo].[users]"; // selects the correct table
$search = sqlsrv_query($conn, $query); // runs the query and fetches the data
$rows = sqlsrv_has_rows($search); // checks the table has something in it
?>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 95%;
padding: 20px;
border: 1px solid #ccc;
border-radius: 3px;
resize: vertical;
transition: 0.3s;
outline: none;
font-family: Dosis, sans-serif;
font-size: 1.5em;
margin: 7px;
}
input[type=text]:focus {
border: 1.25px solid #ea0088;
}
select:focus {
border: 1.25px solid #ea0088;
}
label {
padding: 28px 12px 12px 12px;
margin-left: 5px;
display: inline-block;
font-family: Dosis, sans-serif;
font-size: 1.5em;
font-weight: 500;
color: #999;
}
input[type=submit] {
background-color: #999;
color: white;
padding: 12px 50px;
margin-top: 15px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
transition: 0.3s;
font-family: Dosis, sans-serif;
font-size: 1.5em;
font-weight: 500;
margin-right: 3%;
}
input[type=submit]:hover {
background-color: #ea0088;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 2.5% 20% 0 20%;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.scroll {
overflow-y:visible;
}
body {
background-image: url(proco.jpg);
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<div class="container">
<form action="signin.php" method="post">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="* Please complete">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="* Please complete">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="company">Company</label>
</div>
<div class="col-75">
<input type="text" id="company" name="company">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="reg">Car Reg</label>
</div>
<div class="col-75">
<input type="text" id="reg" name="reg">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="email">Email Address</label>
</div>
<div class="col-75">
<input type="text" id="email" name="email">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="badge">Badge</label>
</div>
<div class="col-75">
<select name="badge">
<?php
for($i=1; $i<=5; $i++) {
echo "<option value=" . $i . ">" . $i . "</option>";
}
?>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="visiting">Visiting</label>
</div>
<div class="col-75">
<select
<option selected="selected" class="scroll">Choose one</option>
<?php
// A sample product array
if($rows === true) {
//FOR EACH CUSTOMER
while ($row = sqlsrv_fetch_array($search, SQLSRV_FETCH_ASSOC)) {
// Iterating through the product array
foreach ($row as $name) {
?>
<option value="<?php echo $name; ?>"><?php echo $name; ?></option>
<?php
}
}
}
?>
</select>
</div>
</div>
<div class="row">
<input type="submit" value="Sign In">
</div>
</form>
</div>
</body>
</html>
我将创建两个宽度为50%的分离div，然后在表单上使用display:flex
我建议使用flexbox有效地创建两个列。您可以在这里看到一些示例：然后在一个狭窄的屏幕上，它可以比表这样的东西更容易地转变为一列。这个问题和您包含的标记对于StackOverflow来说有点宽泛。