[转]输入框对齐问题

十二月 31st, 2009 Posted in 前端技术
No Comments

最近做了一个表单的页面，被输入框的对齐问题烦死了，相信觉得烦的不只我一个，整理下相关的代码，包括输入框内、外文字的对齐。希望对大家有用： 

<label><input type="radio" name="info_name">名称</label>
<label>名称：<input class="input_text l_type"></label>

input{
vertical-align:middle;
}
input[type="radio"]{
	vertical-align:-1px;
	vertical-align:middle\9;
}
.input_txt{
	height:18px;
	height:22px\9;
	padding-left:1px;
	padding-top:4px;
	padding-top:0\9;
	border:1px solid #B3D0DF;
	*line-height:22px;
}

另外，跟大家分享下这次发现的终级hack，比之前《 最新CSS兼容方案 》的简单些：

.e{
	color:#FFF;/* FF,OP */
	[;color:#0F0;]/* Sa,CH */
	color:#FFF\9;/*IE6、7、8*/
	*color:#FF0;/* IE7、6 */
	_color:#F00;/* IE6 */
}
@media all and(min-width:0){
	.e{
		background-color:#FF5500;/* OP */
	}
}

原文地址: http://www.cssforest.org/blog/index.php?id=141

,
Read More

[摘]符合WEB标准的div+css导航下拉菜单

九月 20th, 2007 Posted in 前端技术
No Comments

test.html

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zivee.cn - css菜单演示</title>
<style type="text/css">
<!--
@import "style.css";
-->
</style>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<ul id="nav">
<li><a href="http://www.zivee.cn">产品介绍</a>
<ul>
<li><a href="http://www.zivee.cn">产品一</a></li>
<li><a href="http://www.zivee.cn">产品一</a></li>
<li><a href="http://www.zivee.cn">产品一</a></li>
<li><a href="http://www.zivee.cn">产品一</a></li>
<li><a href="http://www.zivee.cn">产品一</a></li>
<li><a href="http://www.zivee.cn">产品一</a></li>
</ul>
</li>
<li><a href="http://www.zivee.cn">服务介绍</a>
<ul>
<li><a href="http://www.zivee.cn">服务二</a></li>
<li><a href="http://www.zivee.cn">服务二</a></li>
<li><a href="http://www.zivee.cn">服务二</a></li>
<li><a href="http://www.zivee.cn">服务二服务二</a></li>
<li><a href="http://www.zivee.cn">服务二服务二服务二</a></li>
<li><a href="http://www.zivee.cn">服务二</a></li>
</ul>
</li>
<li><a href="http://www.zivee.cn">成功案例</a>
<ul>
<li><a href="http://www.zivee.cn">案例三</a></li>
<li><a href="http://www.zivee.cn">案例</a></li>
<li><a href="http://www.zivee.cn">案例三案例三</a></li>
<li><a href="http://www.zivee.cn">案例三案例三案例三</a></li>
</ul>
</li>
<li><a href="http://www.zivee.cn">关于我们</a>
<ul>
<li><a href="http://www.zivee.cn">我们四</a></li>
<li><a href="http://www.zivee.cn">我们四</a></li>
<li><a href="http://www.zivee.cn">我们四</a></li>
<li><a href="http://www.zivee.cn">我们四111</a></li>
</ul>
</li>
<li><a href="http://www.zivee.cn">在线演示</a>
<ul>
<li><a href="http://www.zivee.cn">演示</a></li>
<li><a href="http://www.zivee.cn">演示</a></li>
<li><a href="http://www.zivee.cn">演示</a></li>
<li><a href="http://www.zivee.cn">演示演示演示</a></li>
<li><a href="http://www.zivee.cn">演示演示演示</a></li>
<li><a href="http://www.zivee.cn">演示演示</a></li>
<li><a href="http://www.zivee.cn">演示演示演示</a></li>
<li><a href="http://www.zivee.cn">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="http://www.zivee.cn">联系我们</a>
<ul>
<li><a href="http://www.zivee.cn">联系联系联系联系联系</a></li>
<li><a href="http://www.zivee.cn">联系联系联系</a></li>
<li><a href="http://www.zivee.cn">联系</a></li>
<li><a href="http://www.zivee.cn">联系联系</a></li>
<li><a href="http://www.zivee.cn">联系联系</a></li>
<li><a href="http://www.zivee.cn">联系联系联系</a></li>
<li><a href="http://www.zivee.cn">联系联系联系</a></li>
</ul>
</li>
</ul>
</body>
</html>

Read the rest of this entry »

, ,
Read More