如何让子标签自适应父标签的宽度

gazaqiang 2014-05-14 03:19:59

<span><i></i><a></a></span>

span{display: block;}
i{float: left; width: 14px; height: 14px;}
a{float: left;}

请教如何做到span标签宽度改变时，a标签自动宽度也跟着填充整个span，即i标签的宽度+a标签的宽度=span标签的宽度

...全文

960 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

gazaqiang 2014-05-14

打赏
举报

引用 3 楼 happy59 的回复:

a{display:block} 不浮动，外观上是否满足需求

你的回答给了我灵光！我搞定了代码： span{display:block; height:23px; overflow:hidden;} // 23为a标签的高度 span i{float: left; width: 14px; height: 14px; margin-right: 2px;} span a{display: block; position: relative; top: -23px; left: 16px;}

happy59 2014-05-14

打赏
举报

a{display:block} 不浮动，外观上是否满足需求

人生难得一只鸡 2014-05-14

打赏
举报

如果里面其他标签宽度不定的话，那么只能采用JS的解决方案，如下，你可以改变span的宽度看效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script>
window.onload=function(){
	var oSpan=document.getElementById('box');
	var arrList=oSpan.getElementsByTagName('*');
	var oA=oSpan.getElementsByTagName('a')[0];
	var iW=0;
	for(var i=0;i<arrList.length;i++)
	{
		if(arrList[i].nodeName.toUpperCase()!=='A')
			iW+=arrList[i].offsetWidth;
	}
	oA.style.width=(oSpan.offsetWidth-iW)+'px';
}

</script>
<style>
span{display:block; width:300px;background:#ccc;height:30px;}
i{float: left; width: 14px; height: 14px;}
a{float: left;background:red;text-align:center;}
</style>
</head>

<body>
<span id="box"><i></i><a>ceshi</a></span>
</body>
</body>
</html>