新手,还没入门,求教_html/css_WEB-ITnose

这个怎么实现居中

nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

无标题文档

#most {

width:780px;
height:30px;
background:url(20120416013038848.jpg);
float:left;
}

#most ul {
padding:0px;
list-style:none;
float:left;
width:8000px;
margin:0px auto;

}
#most li{
float:left;
}
#main {
float:left;
}
#most a{
display:block;
width:119px;
height:30px;
color: #FFF;
text-align:center;
line-height:29px;
text-decoration:none;
font-size:14px;
font-weight:bold;
}
#most a:hover{
background-color:#FFF;
color:#333;}

   电子配件
   电子配件
   电子配件
   电子配件

  

回复讨论(解决方案)

float元素不处理是不能居中的,需要特别的处理:
demo here

  1. nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">        <span class="pun">无标题文档</span>     #most{width:780px;height:30px;background:#f0f0f0;float:left;border:1px solid #ccc; position:relative; left:50%; margin-left:-390px;} #most ul{padding:0px;list-style:none;float:left;width:8000px;margin:0px auto} #most li{float:left} #main{float:left} #most a{display:block;width:119px;height:30px;color:#333;text-align:center;line-height:29px;text-decoration:none;font-size:14px;font-weight:bold} #most a:hover{background-color:#FFF;color:#333}
        
                

登录后复制
这是你原来基础上做的扩展,这种方式只是救急,如果页面元素过多就会引发其它问题。所以我建议用下面的方式居中。
margin:0 auto; 这是大部分网站采取居中的一种办法,高效,安全,稳定,有力。
然后float之后的元素会影响其它兄弟元素,所以要clearfix。
demo here.

  1. nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">        <span class="pun">无标题文档</span>     #most{width:780px;height:30px;background:#f0f0f0;margin: 0 auto;border:1px solid #ccc;} #most ul{padding:0px;list-style:none;float:left;width:8000px;margin:0px auto} #most li{float:left} /*#main{float:left}*/ #most a{display:block;width:119px;height:30px;color:#333;text-align:center;line-height:29px;text-decoration:none;font-size:14px;font-weight:bold} #most a:hover{background-color:#FFF;color:#333} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;}
        
                

登录后复制

常用居中margin:0 auto;

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
编程技术

Hya.io ? 基于 Web 的数字音频工作站_html/css_WEB-ITnose

2025-3-28 13:46:26

编程技术

css 选择器 (学习笔记)_html/css_WEB-ITnose

2025-3-28 13:46:34

0 条回复 A文章作者 M管理员
欢迎您,新朋友,感谢参与互动!
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
私信列表
搜索