<div id="main"> <h1>异常记录登记</h1> <form method="post" action="/submit"> <label>确认线别:</label> <input type="text" name="line"> <label>确认日期:</label> <input type="date" name="date"> <label>异常机种:</label> <input type="text" name="model"> <label>异常现象:</label> <textarea name="issue"></textarea> <label>生产日期:</label> <input type="date" name="prod_date"> <label>生产班别:</label> <input type="text" name="shift"> <label>生产线别:</label> <input type="text" name="prod_line"> <label>责任人:</label> <input type="text" name="responsible"> <input type="submit" value="提交"> </form> </div>請你幫我修改這個 #main { flex: 3; max-width: 80%; margin: 50px 0 50px 20px; padding: 20px; background-color: #fff; }
时间: 2024-03-21 21:44:04 浏览: 133
HTML5期末考核大作业、HTML个人主页界面设计源码
好的,根据您的需求,我帮您修改如下:
```
#main {
flex: 3;
max-width: 80%;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
label {
flex-basis: 20%;
font-weight: bold;
text-align: right;
margin-right: 10px;
}
input[type="text"],
input[type="date"],
textarea {
flex-basis: 70%;
padding: 5px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
textarea {
height: 100px;
}
input[type="submit"] {
flex-basis: 100%;
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0069d9;
}
```
这个修改后的样式会让表单更加美观,也更加易于使用。其中包括了一些常用的表单样式,如 input 的圆角和边框,textarea 的高度设置,以及提交按钮的样式等。希望这个修改后的样式能够满足您的需求。
阅读全文