gpt4 book ai didi

html - 如何使用div在html表单中并排获取两个字段

转载 作者:行者123 更新时间:2023-11-28 13:07:26 32 4
gpt4 key购买 nike

我尝试使用 div 并排创建带有字段的表单。但是它们在行中一个接一个地显示。在这里,我将批处理代码和类(class)代码分成两行。如何将它们并排放在一行中。

<!DOCTYPE html>
<html>
<head>

<link href="css/reset.css" media="screen" rel="stylesheet"/>
<link href="css/redmond/jquery-ui-1.10.2.custom.min.css" media="screen" rel="stylesheet"/>
<link href="css/default.css" media="screen" rel="stylesheet"/>
<link href="sidebarmenu.css" rel="stylesheet" type="text/css">
<script src="sidebarmenu.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery-ui-1.10.2.custom.min.js"></script>

</head>
<body>

<!--<form id="frmExamRegistration" method="post" enctype="multipart/form-data" class="anu">-->


<form name="f1" method="post" class="anu">
<%@include file="header.html"%>

<div style="float:right;width:10%;border:0;font-color:#163362"><a href=logout.jsp">Log Out</a></div>
<%@include file="sidemenus.jsp" %>

<div id="container">
<div class="content" ><center>Delete Batch</center><br>
<div class="formElements">
<label>Batch code:</label>
<span><input type="text" id="txtBatchcode" name="txtBatchcode" ></span>

<div class="formElements" style="z-index:-1">
<label>Course Code:</label>
<span><input type="text" id="txtCoursecode" name="txtCoursecode" ></span>

<div class="buttons" align="center">
<button type="submit" class="primaryAction">Delete</button>
<button type="reset" class="primaryAction">Clear</button>

</div></div></div>
</div>
</div>
</form>
</body>
</html>

最佳答案

您可以在每个 .formElements block 上使用 display:inline-block;

参见此处:http://jsfiddle.net/hAwyy/

<div id="container">
<div class="content">
<h2 style="text-align:center;">Delete Batch</h2>
<div class="formElements" style="display:inline-block;">
<label>Batch code:</label>
<span><input type="text" id="txtBatchcode" name="txtBatchcode" /></span>
</div>
<div class="formElements" style="display:inline-block;">
<label>Course code:</label>
<span><input type="text" id="txtCoursecode" name="txtCoursecode" /></span>
</div>
<div class="buttons" style="text-align:center;">
<button type="submit" class="primaryAction">Delete</button>
<button type="reset" class="primaryAction">Clear</button>
</div>
</div>
</div>

关于html - 如何使用div在html表单中并排获取两个字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15779088/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com