不對,無需要列入左邊為姓名輸入欄,右邊為部門
时间: 2024-03-10 22:45:28 浏览: 27
好的,以下是修改过后的HTML代码,将输入框纵向排列并且姓名和部门在同一行:
```html
<!DOCTYPE html>
<html>
<head>
<title>表单簽核系统</title>
<style>
label {
display: block;
margin-bottom: 10px;
}
input, textarea {
display: block;
width: 100%;
padding: 5px;
margin-bottom: 10px;
box-sizing: border-box;
}
textarea {
height: 100px;
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.col {
flex-basis: calc(50% - 10px);
}
</style>
</head>
<body>
<h1>表单簽核系统</h1>
<form>
<div class="row">
<div class="col">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
</div>
<div class="col">
<label for="department">部门:</label>
<input type="text" id="department" name="department">
</div>
</div>
<label for="date">日期:</label>
<input type="date" id="date" name="date">
<label for="reason">请假原因:</label>
<textarea id="reason" name="reason"></textarea>
<label for="manager">部门经理签名:</label>
<input type="text" id="manager" name="manager">
<label for="hr">人事部签名:</label>
<input type="text" id="hr" name="hr">
<input type="submit" value="提交">
</form>
</body>
</html>
```
我使用了CSS样式来控制输入框的宽度和对齐方式,并且使用了Flexbox布局来实现姓名和部门输入框并排在同一行。同时,我也调整了<label>标签的显示方式,让每个<label>和相应的<input>或<textarea>元素在一行内,并且每个<label>和相应的<input>或<textarea>元素之间有适当的间距,让表单更加美观和易于使用。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)