两个紧邻div重复的边框去掉-ASP.NET教程-爱易网页

两个紧邻div重复的边框去掉

日期：2014-05-17　浏览次数：20633 次

两个相邻div重复的边框去掉

这两个绿色的div框怎么让他去掉他们公用的那一小块边框。
------解决方案--------------------
左侧这个菜单的 border-right:0px
------解决方案--------------------
这个和td是一样的吧，

<table>

    <tr>

        <td style="width:200px;height:30px; border:1px solid Gray">

            

        </td>

        <td style="width:200px;height:30px; border-top:1px solid Gray; border-bottom:1px solid Gray; border-right:1px solid Gray">

            

        </td>

    </tr>

  </table>

------解决方案--------------------
示例

<!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>

<style>

ul {

	list-style: none;

	border-bottom: solid 1px #ccc;

	width: 100px;

	padding: 0;

	margin: 100px auto;

}

li {

	width: 100px;

	font-size: 14px;

	text-align: center;

	height: 30px;

	line-height: 30px;

	

	position: relative;

}

li a{width:98px;height:28;position:absolute;left:0;top:0;z-index:1;border: solid 1px #ccc;

	border-bottom: none; text-decoration:none;}

li a.hover{border-right-color:#fff;}

.content {

	border: solid 1px #ccc;

	width: 200px;

	height: 200px;

	text-align: center;

	display: none;

	position: absolute;

	left: 99px;

	top: -85px;

}

</style>

<script>

window.onload=function()

{

	var oUl=document.getElementById("nav");

	var aLink=oUl.getElementsByTagName('a');

	var aDiv=oUl.getElementsByTagName('div');

	for(var i=0;i<aLink.length;i++)

	{

		aLink[i].index=i;

		aLink[i].onmouseover=function()

		{

			this.className='hover';

			aDiv[this.index].style.display='block';

		}

		aLink[i].onmouseout=function()

		{

			this.className='';

			aDiv[this.index].style.display='none';

		}

	}

}

</script>

</head>



<body>

<ul id="nav">

  <li> <a href="javascript:;">菜单1</a>

    <div class="content"> 内容1 </div>

  </li>

  <li> <a href="javascript:;">菜单2</a>

    <div class="content"> 内容2 </div>

  </li>

  <li> <a href="javascript:;">菜单3</a>

    <div class="content"> 内容3 </div>

  </li>

  <li> <a href="javascript:;">菜单4</a>

    <div class="content"> 内容

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

两个紧邻div重复的边框去掉

相关资料更多>

推荐阅读更多>