html - 两个div的css内联

标签 html css

目前我的显示是这样的

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>

W3schools :

关于html - 两个div的css内联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46740366/

相关文章:

html - 移动 css/html 是否有一套不同的规则

javascript - 是否有用于定义键盘快捷键的 JavaScript 库?

javascript - 使用 javascript/jQuery 设置文本输入值时未反射(reflect)更改

使用参数调用 exe 的 HTML 超链接

jquery - easySlider 在 IE7 中不工作

css - 将显示与 css3 动画一起使用?如何在动画期间/之后隐藏/取消隐藏元素?

php - Wordpress Logo 下奇怪的黑线

html - 谁能告诉我为什么我的 div 之间有 <body> 空间?

css - 分组类选择器和 CSS 特异性

html - 如何向多个选定的用户发送邮件