Question

目前我的显示器看起来像

https://screenshots.firefox.com/kQs0Rz21PMhpDyDE/localhost

我希望添加教育链接以与教育标签内联，但在向后通过单击此链接我显示display none div

https://screenshots.firefox.com/tKtl1rcncgKSp23B/localhost

如果我使用margin top来使内联它隐藏在我的显示器后面没有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的完整内容将附加在带有show showhere的div中

Answer 1

将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样式表。

链接到外部样式表：

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
</head>

W3schools：

css内联两个div

1 个答案: