目前我的显示是这样的
https://screenshots.firefox.com/kQs0Rz21PMhpDyDE/localhost
我想添加教育链接以与教育标签保持一致,但在向后单击此链接时,我显示的是 display none div
https://screenshots.firefox.com/tKtl1rcncgKSp23B/localhost
如果我使用 margin top 使两者都内联它隐藏在我的 display none div 后面
我该怎么办
我的代码是
<div class= "row" id="mainContainer">
<div class="col-md-1 col-xs-4">
<label for="Education">Education</label>
</div>
<div class=class="col-md-8 col-xs-8 verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display: none">
<a href="" style="color: red;margin-left: auto; ">Delete Education</a>
<input type="text" placeholder="School Name" class="form-control" id="School_Name" required="" name="School_Name[]">
|<br>
<input type="text" placeholder="Feild of Study" class="form-control" id="feild_Name" required="" name="feild_Name[]">
<br>
<input type="text" placeholder="Degree" class="form-control" id="Degree_Name" required="" name="Degree_Name[]">
<br>
</div>
</div>
<div class= "row" id="2ndmainContainer">
<div class="col-md-1 col-xs-4"></div>
<div class="col-md-8 col-xs-8 verticalLine" id="showhere" style=" margin-left: 10px ;float:left;"></div>
<div style="margin-left: 120px; float:left;"><a id="addNew"> Add Education</a></div>
</div>
</form>
</div>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
id 嵌套字段的div 的完整内容将附加到id showhere 的div 中
最佳答案
将 float: left
添加到 #mainContainer
。
<div class="row" id="mainContainer" style="float:left">
<div class="col-md-1 col-xs-4">
<label for="Education">Education</label>
</div>
<div class=class="col-md-8 col-xs-8 verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display: none">
<a href="" style="color: red;margin-left: auto; ">Delete Education</a>
<input type="text" placeholder="School Name" class="form-control" id="School_Name" required="" name="School_Name[]"> |
<br>
<input type="text" placeholder="Feild of Study" class="form-control" id="feild_Name" required="" name="feild_Name[]">
<br>
<input type="text" placeholder="Degree" class="form-control" id="Degree_Name" required="" name="Degree_Name[]">
<br>
</div>
</div>
<div class="row" id="2ndmainContainer">
<div class="col-md-1 col-xs-4"></div>
<div class="col-md-8 col-xs-8 verticalLine" id="showhere" style=" margin-left: 10px ;float:left;"></div>
<div style="margin-left: 120px; float:left;"><a id="addNew"> Add Education</a></div>
</div>
</form>
</div>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
而且我强烈建议您使用外部 CSS 样式表。
Link to an external style sheet:
<head> <link rel="stylesheet" type="text/css" href="theme.css"> </head>
关于html - 两个div的css内联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46740366/