HTML 表单带有边框的单独列

Question

我有 4 列，我需要用边框分隔每一列。现在是这样的：

应该如何（仅以红色/蓝色为例）：

问题是我没有列的任何 div，我在 <li> </li> 内生成行，所以 <li> </li> 内的 4 个输入是 1 行：

<form class="form-style-9">

<h2>Personal details</h2>
<ul>
<div id="personal-details">
<li>    

    <div class="test">
    <label for="Rank">Rank</label>
    <input id="Rank" type="text" name="Rank" class="field-style field-split25 align-left" placeholder="Rank" /> 
    </div>

    <div class="test">
    <label for="RankApplied">Rank Applied</label>
    <input id="RankApplied" type="text" name="RankApplied" class="field-style field-split25 align-left" placeholder="Rank Applied" />   
    </div>

    <div class="test">
    <label for="Vesselstype">Vessel's type</label>
    <input id="Vesselstype" type="text" name="Vesselstype" class="field-style field-split25 align-left" placeholder="Vessel's type" />  
    </div>

    <div class="test">
    <label for="datepicker2">Date Applied</label>
    <input id="datepicker2" type="date" name="datepicker2" class="field-style field-split25-4 align-left" placeholder="Date Applied" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="fname">First Name</label>
    <input id="fname" type="text" name="fname" class="field-style field-split25 align-left" placeholder="First Name" /> 
    </div>

    <div class="test">
    <label for="nationality">Nationality</label>
    <input id="nationality" type="text" name="nationality" class="field-style field-split25 align-left" placeholder="Nationality" />    
    </div>

    <div class="test">
    <label for="height">Height</label>
    <input id="height" type="text" name="height" class="field-style field-split25 align-left" placeholder="Height" />   
    </div>

    <div class="test">
    <label for="na">Nearest airport</label>
    <input id="na" type="text" name="na" class="field-style field-split25-4 align-left" placeholder="Nearest airport" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="sname">Surename</label>
    <input id="sname" type="text" name="sname" class="field-style field-split25 align-left" placeholder="Surename" />   
    </div>

    <div class="test">
    <label for="noc">No. of children</label>
    <input id="noc" type="number" name="noc" class="field-style field-split25 align-left" placeholder="No. of children" />  
    </div>

    <div class="test">
    <label for="weight">Weight</label>
    <input id="weight" type="number" name="weight" class="field-style field-split25 align-left" placeholder="Weight" /> 
    </div>

    <div class="test4">
    <label for="languages">Languages</label>
    <input id="languages" type="text" name="languages" class="field-style field-split25-4 align-left" placeholder="Languages" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="datepicker">Date of Birth</label>
    <input id="datepicker" type="date" name="datepicker" class="field-style field-split25 align-left" placeholder="Date of Birth"  />   
    </div>

    <div class="test">
    <label for="nok">Next of kin</label>
    <input id="nok" type="text" name="nok" class="field-style field-split25 align-left" placeholder="Next of kin" />    
    </div>

    <div class="test">
    <label for="coe">Color of eyes</label>
    <input id="coe" type="text" name="coe" class="field-style field-split25 align-left" placeholder="Color of eyes" />  
    </div>

    <div class="test4">
    <label for="english">English</label>
    <input id="english" type="text" name="english" class="field-style field-split25-4 align-left" placeholder="English" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="pob">Place of Birth</label>
    <input id="pob" type="text" name="pob" class="field-style field-split25-4 align-left" placeholder="Place of Birth" />
    </div>

    <div class="test">
    <label for="nonok">Name of Next of Kin</label>
    <input id="nonok" type="text" name="nonok" class="field-style field-split25 align-left" placeholder="Name of Next of Kin" />    
    </div>

    <div class="test">
    <label for="coh">Color of hair</label>
    <input id="coh" type="text" name="coh" class="field-style field-split25 align-left" placeholder="Color of hair" />  
    </div>

    <div class="test4">
    <label for="german">German</label>
    <input id="german" type="text" name="german" class="field-style field-split25-4 align-left" placeholder="German" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="HomeAddress">Home Address</label>
    <input id="HomeAddress" type="text" name="HomeAddress" class="field-style field-split25 align-left" placeholder="Home Address" />   
    </div>

    <div class="test">
    <label for="aonok">Address of Next of Kin</label>
    <input id="aonok" type="text" name="aonok" class="field-style field-split25 align-left" placeholder="Address of Next of Kin" /> 
    </div>

    <div class="test">
    <label for="os">Overall size</label>
    <input id="os" type="text" name="os" class="field-style field-split25 align-left" placeholder="Overall size" /> 
    </div>

    <div class="test4">
    <label for="spain">Spain</label>
    <input id="spain" type="text" name="spain" class="field-style field-split25-4 align-left" placeholder="Spain" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="TelNo">Telephone No.</label>
    <input id="TelNo" type="text" name="TelNo" class="field-style field-split25 align-left" placeholder="Telephone No." />  
    </div>

    <div class="test">
    <label for="TelNo">Telephone No.</label>
    <input id="TelNo" type="text" name="TelNo" class="field-style field-split25 align-left" placeholder="Telephone No." />  
    </div>

    <div class="test">
    <label for="sz">Shoe size</label>
    <input id="sz" type="text" name="sz" class="field-style field-split25 align-left" placeholder="Shoe size" />    
    </div>

    <div class="test4">
    <label for="BankDetails">Bank Details</label>
    <input id="BankDetails" type="text" name="BankDetails" class="field-style field-split25-4 align-left" placeholder="Bank Details" />
    </div>
</li>

</div>

您有什么想法可以实现吗？这里是FIDDLE

Answer 1

如果要保留现有标记，这里有一个选项（尽管您可能需要稍微调整值）

需要注意的是，将<div id="personal-details"> 作为ul 的直接子代是无效标记，应将其删除。您可以将 id 放在 ul 上。

Updated fiddle

ul {
  position: relative;
}
ul li:first-child .test:before {
  content: ' ';
  position: absolute;
  display: block;
  border: 1px solid red;
  top: 0;
  left: 0;
  width: 23.5%;
  height: 100%;
}
ul li:first-child .test:nth-child(2):before {
  left: calc(23.5% + 1px);
  width: 24%;
  border: 1px solid blue;
}
ul li:first-child .test:nth-child(3):before {
  left: calc(47.5% + 1px);
  width: 24%;
}
ul li:first-child .test:nth-child(4):before {
  left: calc(71.5% + 1px);
  border: 1px solid blue;
}

Answer 2

如果您强烈需要将其保持为逐行，您可以选择使用 absolutely 定位的 div。

#personal-details{
  position: relative;
}
ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
li{
  width: 25%;
}
.parent{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.borders{
  display: flex;
  justify-content: space-between;
  height: 40px;
}
.border{
  border: 1px solid red;
  width: 25%;
}

<div id="personal-details">
  <ul>
    <li>this is first</li>
    <li>this is second</li>
    <li>this is third</li>
    <li>this is forth</li>
    <li>this is first</li>
    <li>this is second</li>
    <li>this is third</li>
    <li>this is forth</li>
  </ul>
  <div class="parent">
    <div class="borders">
      <div class="border"></div>
      <div class="border"></div>
      <div class="border"></div>
      <div class="border"></div>
    </div>
  </div>
</div>

注意1

请注意，您不应该将divs 直接放在ul 中，所以这是不正确的：

<ul>
    <div>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </div>
</ul>

注2

如果您按列生成它们，那将是一个更好的做法，这样您就不需要在 CSS 上胡思乱想了。

所需的标记

<ul id="personal-details">
    <li>
        <ul class="column">
            <li>Rank</li>
            <li>First name</li>
            <li>Surname</li>
            <li>Date of Birth</li>
            <li>Place of Birth</li>
            <li> ... </li>
            <li> ... </li>
        </ul>    
    </li>
    <li>
        <ul class="column">
            <li>Rank</li>
            <li>Nationality</li>
            <li>No. of children</li>
            <li>Next of kin</li>
            <li>Name of Next of kin</li>
            <li> ... </li>
            <li> ... </li>
        </ul>    
    </li>
    <li> ... </li>
    <li> ... </li>
</ul>

解决方案

ul{
  list-style: none;
}
#personal-details{
  margin: auto;
  display: flex;
  justify-content: space-between;
}
#personal-details > li{
  padding: 20px;
  border: 1px solid red;
}
.column{
  padding: 0;
  text-align: center;
}

<ul id="personal-details">
    <li>
        <ul class="column">
            <li>
                <label for="Rank">Rank</label>
                <input type="text" name="Rank" placeholder="Rank" />
            </li>
            <li>
                <label for="Firstname">First name</label>
                <input type="text" name="Firstname" placeholder="Firstname" />
            </li>
            <li>
                <label for="Surname">Surname</label>
                <input type="text" name="Surname" placeholder="Surname" />
            </li>
            <li>
                <label for="Rank">Date of Birth</label>
                <input type="text" name="DateofBirth" placeholder="DateofBirth" />
            </li>
            <li>
                <label for="PlaceofBirth">Place of Birth</label>
                <input type="text" name="PlaceofBirth" placeholder="Place of Birth" />
            </li>
            <li> ... </li>
            <li> ... </li>
        </ul>    
    </li>
    <li>
        <ul class="column">
            <li>
                <label for="RankApplied">Rank Applied</label>
                <input type="text" name="RankApplied" placeholder="RankApplied" />
            </li>
            <li>
                <label for="Nationality">Nationality</label>
                <input type="text" name="Nationality" placeholder="Nationality" />
            </li>
            <li>
                <label for="NoOfChildren">No. Of Children</label>
                <input type="text" name="NoOfChildren" placeholder="NoOfChildren" />
            </li>
            <li>
                <label for="NextOfKin">Next Of Kin</label>
                <input type="text" name="NextOfKin" placeholder="NextOfKin" />
            </li>
            <li>
                <label for="NameOfNextOfKin">Name of Next of kin</label>
                <input type="text" name="NameOfNextOfKin" placeholder="NameOfNextOfKin" />
            </li>
            <li> ... </li>
            <li> ... </li>
        </ul>    
    </li>
    <li>
        <ul class="column">
            <li>
                <label for="Rank">Rank</label>
                <input type="text" name="Rank" placeholder="Rank" />
            </li>
            <li>
                <label for="Firstname">First name</label>
                <input type="text" name="Firstname" placeholder="Firstname" />
            </li>
            <li>
                <label for="Surname">Surname</label>
                <input type="text" name="Surname" placeholder="Surname" />
            </li>
            <li>
                <label for="Rank">Date of Birth</label>
                <input type="text" name="DateofBirth" placeholder="DateofBirth" />
            </li>
            <li>
                <label for="PlaceofBirth">Place of Birth</label>
                <input type="text" name="PlaceofBirth" placeholder="Place of Birth" />
            </li>
            <li> ... </li>
            <li> ... </li>
        </ul>    
    </li>
    <li>
        <ul class="column">
            <li>
                <label for="RankApplied">Rank Applied</label>
                <input type="text" name="RankApplied" placeholder="RankApplied" />
            </li>
            <li>
                <label for="Nationality">Nationality</label>
                <input type="text" name="Nationality" placeholder="Nationality" />
            </li>
            <li>
                <label for="NoOfChildren">No. Of Children</label>
                <input type="text" name="NoOfChildren" placeholder="NoOfChildren" />
            </li>
            <li>
                <label for="NextOfKin">Next Of Kin</label>
                <input type="text" name="NextOfKin" placeholder="NextOfKin" />
            </li>
            <li>
                <label for="NameOfNextOfKin">Name of Next of kin</label>
                <input type="text" name="NameOfNextOfKin" placeholder="NameOfNextOfKin" />
            </li>
            <li> ... </li>
            <li> ... </li>
        </ul>    
    </li>
</ul>

Answer 3

您可以尝试通过以下方式进行更改。

<form class="form-style-9 clearfix">

<h2>Personal details</h2>
<ul>
<div id="personal-details">

<div class="col clearfix">
    <div class="test">
    <label for="Rank">Rank</label>
    <input id="Rank" type="text" name="Rank" class="field-style field-split25 align-left" placeholder="Rank" /> 
    </div>
    <div class="test">
    <label for="fname">First Name</label>
    <input id="fname" type="text" name="fname" class="field-style field-split25 align-left" placeholder="First Name" /> 
    </div>
    <div class="test">
    <label for="sname">Surename</label>
    <input id="sname" type="text" name="sname" class="field-style field-split25 align-left" placeholder="Surename" />   
    </div>
    <div class="test">
    <label for="pob">Place of Birth</label>
    <input id="pob" type="text" name="pob" class="field-style field-split25-4 align-left" placeholder="Place of Birth" />
    </div>
</div>
<div class="col clearfix">
    <div class="test">
    <label for="RankApplied">Rank Applied</label>
    <input id="RankApplied" type="text" name="RankApplied" class="field-style field-split25 align-left" placeholder="Rank Applied" />   
    </div>
    <div class="test">
    <label for="nationality">Nationality</label>
    <input id="nationality" type="text" name="nationality" class="field-style field-split25 align-left" placeholder="Nationality" />    
    </div>
    <div class="test">
    <label for="noc">No. of children</label>
    <input id="noc" type="number" name="noc" class="field-style field-split25 align-left" placeholder="No. of children" />  
    </div>

</div>
<div class="col clearfix">
<div class="test">
    <label for="RankApplied">Rank Applied</label>
    <input id="RankApplied" type="text" name="RankApplied" class="field-style field-split25 align-left" placeholder="Rank Applied" />   
    </div>
    <div class="test">
    <label for="nationality">Nationality</label>
    <input id="nationality" type="text" name="nationality" class="field-style field-split25 align-left" placeholder="Nationality" />    
    </div>
    <div class="test">
    <label for="noc">No. of children</label>
    <input id="noc" type="number" name="noc" class="field-style field-split25 align-left" placeholder="No. of children" />  
    </div>
</div>
<div class="col clearfix">
<div class="test">
    <label for="RankApplied">Rank Applied</label>
    <input id="RankApplied" type="text" name="RankApplied" class="field-style field-split25 align-left" placeholder="Rank Applied" />   
    </div>
    <div class="test">
    <label for="nationality">Nationality</label>
    <input id="nationality" type="text" name="nationality" class="field-style field-split25 align-left" placeholder="Nationality" />    
    </div>
    <div class="test">
    <label for="noc">No. of children</label>
    <input id="noc" type="number" name="noc" class="field-style field-split25 align-left" placeholder="No. of children" />  
    </div>
</div>

</form>

块引用

.form-style-9{

    background: #FAFAFA;
    padding: 30px;
    margin: 50px auto;
    box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    border: 6px solid #305A72;
}
.form-style-9 ul{
    padding:0;
    margin:0;
    list-style:none;
}
.form-style-9 ul li{
    display: block;
    margin-bottom: 1.25%;
    min-height: 58px;
}
.form-style-9 ul li  .field-style{
    box-sizing: border-box; 
    padding: 8px;
    outline: none;
    border: 1px solid #B0CFE0;
}
.form-style-9 ul li  .field-style:focus{
    box-shadow: 0 0 5px #B0CFE0;
    border:1px solid #B0CFE0;
}
.form-style-9 ul li .field-split{
    width: 49%;
}
.form-style-9 ul li .field-split25{
   /* float: left;
    width: 24%;
    margin-right: 1.25%;*/
    height: 40px;
}
.form-style-9 ul li .field-split25-4{
    /*float: left;
    width: 24%;
    margin-right: 0;*/
    height: 40px;
}
.form-style-9 ul li .field-full{
    width: 100%;
}
.form-style-9 ul li input.align-left{
    /*float:left;*/
}
.form-style-9 ul li input.align-right{
    float:right;
}
.form-style-9 ul li textarea{
    width: 100%;
    height: 100px;
}
.form-style-9 ul li input[type="button"], 
.form-style-9 ul li input[type="submit"] {
    box-shadow: inset 0px 1px 0px 0px #3985B1;
    background-color: #216288;
    border: 1px solid #17445E;
    display: inline-block;
    cursor: pointer;
    color: #FFFFFF;
    padding: 8px 18px;
    text-decoration: none;
    font: 12px Arial, Helvetica, sans-serif;
}
.form-style-9 ul li input[type="button"]:hover, 
.form-style-9 ul li input[type="submit"]:hover {
    background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
    background-color: #28739E;
}


.formcol{
float: left;
padding: 2px;
} 
.formcol label {

font-weight: bold;
display:block;
} 
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.test {
  margin-right: 1.25%;
  margin-bottom: 1.25%;
}
.image-div {
    margin-right: 4%;
    float:right;
    width: 200px;
    height: 200px;      
}
.image-upload {
  float:right;
  width: 100%;
  margin-right: 1.25%;
  margin-bottom: 1.25%;
}
.image-preview {
  float:right;
  width: 150px;
  height: 150px;
  margin-right: 1.25%;
  margin-bottom: 1.25%;
  position:relative;
  border: 1px solid #B0CFE0;
}
.test4 {
  float:left;
  width: 23%;
  margin-right: 0;
  margin-bottom: 1.25%;
}
.test-label {  
  width: 23%;
  margin-right: 1.25%;
  margin-bottom: 0px;
  padding:0px;
  font-weight: bold;
}
.test-label1 {  
  width: 23%;
  margin-right: 1.25%;
  margin-bottom: 0px;
  padding:0px;
}
.removeRow{
height:auto;
width:auto;
max-width:12px;
max-height:12px;
}
.div-format-30 {
  width: 90%;
  margin-right: 1.25%;
  margin-bottom: 0;
  margin-top: 1.25%;
  border: 1px solid #B0CFE0;
}
.div-format-30 td{
    margin-top:20px;
  float:left;
  width: 90%;
  margin-right: 1.25%;
  margin-bottom: 0;
  margin-top: 1.25%;
  border: 1px solid #B0CFE0;
}
.split33 {
  float:left;
  width: 28%;
  margin-right: 1.25%;
  margin-bottom: 1.25%;
}
.split33right {
  float:right;
  width: 23%;
  margin-right: 0;
  margin-bottom: 1.25%;
}
.div-format {
  font-size:12px;
  float:left;
  width: 23%;
  margin-right: 1.25%;
  margin-bottom: 1.25%;
  border: 1px solid #B0CFE0;
}
.test4 {
  float:left;
  width: 23%;
  margin-right: 0;
  margin-bottom: 1.25%;
}
.header {
  float:left;
  width: 100%;
  margin-right: 1.25%;
  margin-bottom: .25%;
}
label {
  display: block;
  text-align: center;
}
input {
  width: 100%;
}
.form-style-9 ul li input[type="submit"] {
  width: 10%;
}
.resume-title {
    color: #af5d86;
}
.container {
    margin-left: 2%;
    margin-right: 2%;
}
.personal-details {
    padding-bottom:1.25%;
}
.col{
    float: left;
    width: 23%;
    margin-right: 1.25%;
    margin-bottom: 1.25%;
    border: 1px solid #c2c2c2;
    padding: 1%;
}

Answer 4

你必须这样做：

1) 使 li 垂直并更改示例中的内容以垂直指定它。

2) 但是所有 li 的 id 和 css 中的边框都是这样的

<li id='first-column'> any thing</li>
<li id='second-column'> any thing</li>

css=>

#first-column { border:1px red solid; }

#second-column { border:1px blue solid; }