html5 上下左右 html上下左右布局

HTML中div上下左右布局，可使用div+css中的margin，表示与上下左右div的距离，单位：px。

<div id="5" style="width:250px;height:130px;margin-top: 20px;margin-left: 20px;">
			<form action="http://www.baidu.com" method="get">				
				<input type="submit" value="111"/>
			</form>			
		</div>

注意：一般情况，默认的div是写一个换一行，那么如何定义多个div横向排列而不换行呢？

1、先在head中定义div样式style,如：

<style>
	.div-a{display: inline;}
	.div-b{display: inline-block;}	
</style>

2、在body的div中，加上class属性

备注：class属性名不包含定义样式前面的. 属性名为后面的div-a/div-b

<div class="div-a" id='2' style="background-color:rgb(0, 255, 0);width:300px;height:240px;text-align:center;margin-top: 10px;margin-left: 20px;"></div>
<div class="div-a" id='2' style="background-color:rgb(0, 255, 0);width:300px;height:240px;text-align:center;margin-top: 10px;margin-left: 20px;"></div>
div块里面可以嵌套加入各种元素

备注：display的值inline和inline-block都表示不换行，但是inline不能在div属性中设置宽高，inline-block可以在div属性中设置宽高

定义文本边距(文本上下左右布局)

使用padding方法:

怎样调整文本在div中对齐方式

左右对齐方式：使用text-align：

备注：对于超链接，调整左右对齐方式：使用text-align，此属性要加到标签的父级 style属性中

上下对齐方式 line-height

后面的属性值设置和父级的盒状标签高度相同，这样就可以做到文字垂直方向上居中了

<div class="div-a" id='2' style="background-color:rgb(0, 255, 0);width:200px;height:50px;text-align:center;line-height:50px;margin-top: 10px;margin-left: 20px;">
			<a href="http://testscf.dmall.com">测试环境</a>
		</div>