奇怪，margin:0px不管用，得有height值，就管用了

Jenf_Mu 2011-05-18 03:33:07

做个选项卡，类似百度地图那个搜索框，上面搜索框，下面选"地名"、"公交"、之类的
搜索框与选项卡始终是分开的，我用
.tab_menu { clear:both;margin:0px;padding:0;}
也不行，

但.tab_menu { clear:both;margin:0px;padding:0;height:100px;}
这样就行了，为什么呀

...全文

168 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

Jenf_Mu 2011-06-13

打赏
举报

我终于理解了，是<ul style="margin-top:0px;">

Jenf_Mu 2011-05-18

打赏
举报

虽然问题可以解决，但原理仍然模糊不清

卟惹尘埃 2011-05-18

打赏
举报



<style>

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}

 .tab { width:240px;margin:50px;}

 .tab_menu{ float:left; width:100%}

 .tab_menu li { float:right; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-top:none;}

 .tab_menu li.hover { background:#DFDFDF;}

 .tab_menu li.selected { color:#FFF; background:#6D84B4;}

 .tab_box { clear:both; border:1px solid #898989; height:100px;}

 .hide{display:none}

</style>

<!--============混割线===========-->

<div class="tab">

    <div class="tab_box"> 

         <div>时事</div>

         <div class="hide">体育</div>

         <div class="hide">娱乐</div>

    </div>

    <div class="tab_menu">

        <ul style="margin-top:0px;">

            <li class="selected">时事</li>

            <li>体育</li>

            <li>娱乐</li>

        </ul>

    </div>



</div>

ie6 ie8 firefox测试通过

卟惹尘埃 2011-05-18

打赏
举报

你<ul>没有设置样式,所以有默认的样式在里面，你设置一下，然后.tab_menu没有浮动，所以<li>有浮动就会不受.tab_menu的限制，所以你<ul style="margin-top:0px;">之后，还要加上 .tab_menu{ float:left; width:100%}

<div class="tab_menu">

        <ul style="margin-top:0px;"> //设置一下就好了，你试试

            <li class="selected">时事</li>

            <li>体育</li>

            <li>娱乐</li>

        </ul>

    </div>

Jenf_Mu 2011-05-18

打赏
举报

<!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=gb2312" />

<title></title>

<link href="css/mystyle.css" rel="stylesheet" type="text/css" />

<!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript" >

//<![CDATA[

	$(function(){

	    var $div_li =$("div.tab_menu ul li");

	    $div_li.click(function(){

			$(this).addClass("selected")            //当前<li>元素高亮

				   .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮

            var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。

			$("div.tab_box > div")   	//选取子节点。不选取子节点的话，会引起错误。如果里面还有div 

					.eq(index).show()   //显示 <li>元素对应的<div>元素

					.siblings().hide(); //隐藏其它几个同辈的<div>元素

		}).hover(function(){

			$(this).addClass("hover");

		},function(){

			$(this).removeClass("hover");

		})

	})

//]]>

</script>

</head>

<body>



<div class="tab">

	<div class="tab_box"> 

		 <div>时事</div>

		 <div class="hide">体育</div>

		 <div class="hide">娱乐</div>

	</div>

	<div class="tab_menu"padding:0;>

		<ul>

			<li class="selected">时事</li>

			<li>体育</li>

			<li>娱乐</li>

		</ul>

	</div>



</div>



</body>

</html>

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
.tab { width:240px;margin:50px;}
.tab_menu { clear:both;margin:0px;padding:0;height:100px;}
.tab_menu li { float:right; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-top:none;}
.tab_menu li.hover { background:#DFDFDF;}
.tab_menu li.selected { color:#FFF; background:#6D84B4;}
.tab_box { clear:both; border:1px solid #898989; height:100px;}
.hide{display:none}[/code]

卟惹尘埃 2011-05-18