1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

HTML布局之左右结构,左边固定右边跟据父元素自适应

作者:用户 来源:互联网 时间:2016-03-11 13:12:05

布局密码margin字符左右结构字母font-size

HTML布局之左右结构,左边固定右边跟据父元素自适应 - 摘要: 本文讲的是HTML布局之左右结构,左边固定右边跟据父元素自适应, HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+、Firefox、Chrome、Opera、Safari,这里是用表单写的一个 demo

HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+、Firefox、Chrome、Opera、Safari,这里是用表单写的一个 demo,其实就在主体布局中也是可以的,比如像后台一些管理系统左侧菜单,右侧内容。这里只是其中一种方法,更多方法可以查看 blog(http://www.jayzhang.cn/2014/01/layout_left_right/)

HTML布局之左右结构,左边固定右边跟据父元素自适应-左边固定 右边自适应
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	.item {
		overflow: hidden;
		zoom: 1;
		font-size: 12px;
		margin-bottom: 20px;
	}
	.item .item-title {
		float: left;
		width: 85px;
		font-size: 14px;
		font-weight: 400;
		text-align: right;
	}
	.item .item-con {
		overflow: hidden;
		zoom: 1;
	}
	em,i {
		font-style: normal;
	}
	p {
		margin: 0.3em 0;
	}
	.star {
		color: #F00;
		margin-right: 5px;
	}
	.tips-text {
		color: #ccc;
	}
	.input {
		border: 1px solid #ccc;
		padding: 2px 5px;
		margin: 0;
	}
	</style>
</head>
<body>
<ul>
	<li class="item">
		<div class="item-title">
			<em class="star">*</em><label for="">邮件地址</label><i>:</i>
		</div>
		<div class="item-con">
			<input class="input" placeholder="建议用手机号码注册" type="text" />
			<p class="tips-text">6~18个字符,可使用字母、数字、下划线,需以字母开头</p>
		</div>
	</li>
	<li class="item">
		<div class="item-title">
			<em class="star">*</em><label for="">密码</label><i>:</i>
		</div>
		<div class="item-con">
			<input class="input" type="text" />
			<p class="tips-text">6~16个字符,区分大小写</p>
		</div>
	</li>
	<li class="item">
		<div class="item-title">
			<em class="star">*</em><label for="">确认密码</label><i>:</i>
		</div>
		<div class="item-con">
			<input class="input" type="text" />
			<p class="tips-text">请再次填写密码</p>
		</div>
	</li>
</ul>
</body>
</html>


以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索布局 , 密码 , margin , 字符 , 左右结构 , 字母 font-size 左边固定 右边自适应、左边定宽右边自适应、两列布局 右边自适应、两列布局 左边自适应、js左边固定右边自适应,以便于您获取更多的相关知识。

html-HTML布局 三列中间固定宽度左右自适应

问题描述 HTML布局 三列中间固定宽度左右自适应 三个div,同样高度,中间的div固定宽度,左右两边的div宽度自适应。这个要怎么做,跪求高手赐教! 解决方案 左右怎么个自适法,...

CSS实现网页右边固定左边自适应布局

一、右边固定左边自适应布局 右边的元素浮动 网页的渲染和网页的机构有很大的关系,最先出现的元素最先显示,右边的元素设置右浮动,左边的元素不浮动,但是设置margin-right,设置的值为右边元素的宽度。 CSS  代码如下 ...

【php基础班】第7天 overflow属性、CSS引入方式、定位、布局、margin合并问题、浏览器兼容

... 继承的权重为0 第四节 定位技术 1.  xhtml+css 定位技术 DIV布局就是DIV+CSS,标准的说法应该是xhtml+css。是一种网站设计标准。在XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。CSS是英语Cascading S...

MySQL技术内幕:InnoDB存储引擎读书笔记(中)

...二叉树首先的符合二叉树定义,其次必须满足任何节点的左右两个子树高度最大差1.平衡二叉树的效率较高,但是维护平衡二次树需要消耗比较多的资源。   5.4、B+树   B+树是从B树和索引顺序访问方法演化而来。在B+树中,...

移动端适配以及百分比布局与rem比较

前言对于熟悉pc端的小伙伴来说,对于静态页面的布局,一般都是没有什么问题的,为了保持各浏览器显示的一致性,无论是选择优雅降级还是渐进增强,我们有时不得不做兼容性处理,比如css中的hack技术,css3中新增属性添加一些浏览器...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备