英文:
Have vertical bar right next to form entry
问题
我正在尝试创建一个网页，其中有一个表单，但员工编号与表单的其余部分由一根跨越整个页面的垂直条分隔。
但是，当我尝试使用绿色垂直条时，它看起来像 
。任何帮助将不胜感激！！
.vl {
border-left: 6px solid green;
height: 500px;
}
<label htmlFor='ID'>员工编号</label>
<input className="form-control w-25" id="ID" readOnly></input>
<div className="vl"></div>
<form data-transport-order="form">
<div className="form-group">
<label htmlFor='ID'>发票号</label>
<input className="form-control" id="ID" readOnly></input>
<label htmlFor="TransportDate">日期</label>
<input type="date" className="form-control w-25" ID="TransportDate" autoFocus required></input>
</div>
</form>
英文:
I am trying to create a webpage where it is a form, but the employee id is separated from the rest of the form by a vertical bar that spans the entire page. However, when I try to do that with a green vertical bar, it looks like . Any help would be greatly appreciated!!
.vl {
border-left: 6px solid green;
height: 500px;
}
<label htmlFor='ID'>EMPLOYEE #</label>
<input className="form-control w-25" id="ID" readOnly></input>
<div className="vl"></div>
<form data-transport-order="form">
<div className="form-group">
<label htmlFor='ID'>Invoice No.</label>
<input className="form-control" id="ID" readOnly></input>
<label htmlFor="TransportDate">Date</label>
<input type="date" className="form-control w-25" ID="TransportDate" autoFocus required></input>
</div>
</details>
# 答案1
**得分**: 2
尝试使用 flex 布局，它更容易适应这种情况。
您的组件 JSX：
```html
<div className='form-container'>
<div className='employee-id'>
<label htmlFor='ID'>EMPLOYEE #</label>
<input className="form-control w-25" id="ID" readOnly></input>
</div>
<form className='employee-details' data-transport-order="form">
<div className="form-group">
<label htmlFor='ID'>Invoice No.</label>
<input className="form-control" id="ID" readOnly></input>
<label htmlFor="TransportDate">Date</label>
<input type="date" className="form-control w-25" id="TransportDate" autoFocus required></input>
</div>
</form>
</div>
样式：
.form-container {
display: flex;
flex-direction: row;
}
.employee-id {
display: flex;
flex-direction: column;
border-right: 6px solid green;
margin-right: 10px;
padding-right: 10px;
}
.employee-details .form-group {
display: flex;
flex-direction: column;
}
结果：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.form-container {
display: flex;
flex-direction: row;
}
.employee-id {
display: flex;
flex-direction: column;
border-right: 6px solid green;
margin-right: 10px;
padding-right: 10px;
}
.employee-details .form-group {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<div id="root">
<div class="App">
<div class="form-container">
<div class="employee-id"><label for="ID">EMPLOYEE #</label><input class="form-control w-25" id="ID" readonly=""></div>
<form class="employee-details" data-transport-order="form">
<div class="form-group"><label for="ID">Invoice No.</label><input class="form-control" id="ID" readonly=""><label for="TransportDate">Date</label><input type="date" class="form-control w-25" id="TransportDate" required=""></div>
</form>
</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
以上是您要翻译的内容。
英文:
Try using flex it's easier and a good fit of this case.
Your component JSX:
<div className='form-container'>
<div className='employee-id'>
<label htmlFor='ID'>EMPLOYEE #</label>
<input className="form-control w-25" id="ID" readOnly></input>
</div>
<form className='employee-details' data-transport-order="form">
<div className="form-group">
<label htmlFor='ID'>Invoice No.</label>
<input className="form-control" id="ID" readOnly></input>
<label htmlFor="TransportDate">Date</label>
<input type="date" className="form-control w-25" id="TransportDate" autoFocus required></input>
</div>
</form>
</div>
Styles:
.form-container{
display: flex;
flex-direction: row;
}
.employee-id{
display: flex;
flex-direction: column;
border-right: 6px solid green;
margin-right: 10px;
padding-right: 10px;
}
.employee-details .form-group{
display: flex;
flex-direction: column;
}
Result
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.form-container {
display: flex;
flex-direction: row;
}
.employee-id {
display: flex;
flex-direction: column;
border-right: 6px solid green;
margin-right: 10px;
padding-right: 10px;
}
.employee-details .form-group {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<div id="root">
<div class="App">
<div class="form-container">
<div class="employee-id"><label for="ID">EMPLOYEE #</label><input class="form-control w-25" id="ID" readonly=""></div>
<form class="employee-details" data-transport-order="form">
<div class="form-group"><label for="ID">Invoice No.</label><input class="form-control" id="ID" readonly=""><label for="TransportDate">Date</label><input type="date" class="form-control w-25" id="TransportDate" required=""></div>
</form>
</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论