黑马程序员技术交流社区

标题: html标签中的列表标签UL的布局问题？ [打印本页]
作者: 沉淀    时间: 2011-12-2 09:39
标题: html标签中的列表标签UL的布局问题？
本帖最后由 沉淀 于 2011-12-14 11:03 编辑
  1. <div>
  2.     <ul>
  3.        <li></li>
  4.        <li></li>
  5.    </ul>
  6. </div>
复制代码
在上面的代码中，如果设置UL相对于DIV的margin属性，总是得不到想要的效果？希望高手指点！不胜感激！
作者: 梁琨    时间: 2011-12-2 11:07
http://www.w3school.com.cn/tags/tag_ul.asp
进到这个网站学习，事半功倍！
应该可以帮到你！
作者: 李海龙    时间: 2011-12-2 11:10
CSS
div ul{
    margin-left:Xpx;
     设置上下左右
  float: left;
   浮动  左右  然后你可以设置 ul之间的距离 和风格  换前面的符号 之类 具体需要什么 则需要自己选择  
}
作者: 董志    时间: 2011-12-2 15:24
补充说一句，文档布局结构我也懂，主要是ul在div内，设置ul{margin-top:XXXpx;},有问题。
作者: Luck_c    时间: 2011-12-2 21:56
会不会是你的Div没设置width和height属性的原因？
作者: 谭显锋    时间: 2011-12-2 22:37
这是我以前用无序列表写的导航。你参考一下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
  .ulClass{ width:605px; list-style:none; margin:0px; padding:0px;}/*padding为控件的内边距*/
  .ulClass li{ float:left; width:150px; font-size:12px; font-weight:bold; color:#000000; background-color:#CCCC00; line-height:20px; margin-left:1px;}
  #overClass{ background-color:#CCCCCC; color:#333399; border-style:solid; border-width:1px; border-color:#666666; border-bottom-style:none; border-bottom-width:0px; width:148px;}
   #overClass1{ width:149px; background-color:#CCCCCC; color:#333399; border-style:solid; border-width:1px; border-color:#666666; border-bottom-style:none; border-bottom-width:0px;}
  #outClass{ color:#000000; background-color:#CCCC00;}
  .divClass{ clear:both; width:603px; height:300px; border-style:solid; border-width:1px; border-color:#999999; border-top-style:none; border-top-width:0px;}
</style>
<script language="javascript">
   function  chageText(num)
   {
     switch(num)
         {
         case 1:
           document.getElementById("div1").style.display="block";
           document.getElementById("div2").style.display="none";
           document.getElementById("div3").style.display="none";
           document.getElementById("div4").style.display="none";
           break;
           case 2:
           document.getElementById("div1").style.display="none";
           document.getElementById("div2").style.display="block";
           document.getElementById("div3").style.display="none";
           document.getElementById("div4").style.display="none";
           break;
           case 3:
           document.getElementById("div1").style.display="none";
           document.getElementById("div2").style.display="none";
           document.getElementById("div3").style.display="block";
           document.getElementById("div4").style.display="none";
           break;
            case 4:
           document.getElementById("div1").style.display="none";
           document.getElementById("div2").style.display="none";
           document.getElementById("div3").style.display="none";
           document.getElementById("div4").style.display="block";
           break;
         }
   }
</script>
</head>

<body style="text-align:center; margin:0px; padding:0px;" >
           <div style="width:603px; margin:0px auto">
     <ul  class="ulClass">
        <li onmouseover="chageText(1); id='overClass'" style="margin-left:0px;" onmouseout="id='outClass'">首页</li>
         <li onmouseover="chageText(2); id='overClass'" onmouseout="id='outClass'" >公司简介</li>
          <li onmouseover="chageText(3); id='overClass'" onmouseout="id='outClass'" >产品介绍</li>
           <li onmouseover="chageText(4); id='overClass1'"  style="margin:0px; padding:0px; margin-left:2px;" onmouseout="id='outClass'" >联系我们</li>
      </ul>
      <div class="divClass" id="div1" >
      欢迎光临蓝天电子科技有限公司网页！
      </div>
      <div class="divClass" id="div2" style="display:none">
      我们公司是一家中美合资的大型电子产品生产和研发的公司。
      </div>
      <div class="divClass" id="div3" style="display:none">
      主要生产液晶显示器，背投彩电，平板电视等
      </div>
      <div class="divClass" id="div4" style="display:none">
      公司电话：010-456656125 传真：010-234684612
      </div>
      </div>
</body>
</html>
作者: 李荣壮    时间: 2011-12-3 08:17
你跟董志什么关系  ,怎么头像都一样的
作者: 董志    时间: 2011-12-14 10:54
呵呵，沉淀那个是我用QQ账号登陆的，改不了名，所以就又注册了一个
作者: 董志    时间: 2011-12-14 10:56
ul和div的布局问题，在w3c找到了答案，主要是边框至少得指定一个，否则会margin重叠现象，想必很多同学都遇到过了吧！



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2