导航栏无法达到1002像素的宽度，求解

Fairstay 2011-07-26 06:52:59
是这样的，我刚学div+css，现在在网上找了一个导航条，可是无法将其宽度设置成1002大小的，求解


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

<style type="text/css">

    body {

	margin:0;

	padding:0;

	font: bold 21px/1.5em Verdana;

}

img {

border: none;

} 

/*- Menu Tabs 8--------------------------- */



    #tabs8 ul {

	  margin:0;

	  padding:1px 10px 0 50px;

	  list-style:none;

      }

    #tabs8 li {

      display:inline;

      margin:0;

      padding:0;

      }

    #tabs8 a {

      float:left;

      background:url("tableft8.gif") no-repeat left top;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

      }

    #tabs8 a span {

      float:left;

      display:block;

      background:url("tabright8.gif") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#333;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabs8 a span {float:none;}

    /* End IE5-Mac hack */

    #tabs8 a:hover span {

      color:#591333;

      }

    #tabs8 a:hover {

      background-position:0% -42px;

      }

    #tabs8 a:hover span {

      background-position:100% -42px;

      }

</style>

</head>

<body>

<div id="tabs8">

  <ul>

    <li><a href="#" ><span> 市局主页 </span></a></li>

    <li><a href="#" ><span> 网站首页 </span></a></li>

    <li><a href="#" ><span> 刑大简介 </span></a></li>

    <li><a href="#" ><span> 刑事技术 </span></a></li>

    <li><a href="#" ><span> 视频点播 </span></a></li>

    <li><a href="#" ><span> 图片新闻 </span></a></li>

	<li><a href="#" ><span> 值 班 表 </span></a></li>

    <li><a href="#" ><span> 通 讯 录 </span></a></li>

  </ul>

</div>

</body>

</html>
...全文
367 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
lsw645645645 2011-07-26
  • 打赏
  • 举报
 回复
加个样式啊：


#tabs8

{

    width:100%;

    background:#eee;

    height:80px;

}
MuBeiBei 2011-07-26
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 fairstay 的回复:]
主要让它能平铺下来即可，我是这个思路，但是不会解决
[/Quote]

你说是图片？
主要是我着看不到你加的这些gif图。所以看不到整体效果
Fairstay 2011-07-26
  • 打赏
  • 举报
 回复
主要让它能平铺下来即可，我是这个思路，但是不会解决
Fairstay 2011-07-26
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 mubeibei 的回复:]

HTML code
<!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-equi……
[/Quote]
谢谢，不过还是没有效果，我期望的两边能靠边，虽然定义了，但是浏览器上还是不靠边，仍然在中间
MuBeiBei 2011-07-26
  • 打赏
  • 举报
 回复 
<!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>

<style type="text/css">

    body {

    margin:0;

    padding:0;

    font: bold 21px/1.5em Verdana;

}

img {

border: none;

} 

/*- Menu Tabs 8--------------------------- */

#tabs8{width:100%; min-width:1002px;}

    #tabs8 ul {

      

      list-style:none;

	  

      }

    #tabs8 li {

      display:inline;

      margin:0;

      padding:0;

	  

      }

    #tabs8 a {

      float:left;

      background:url("tableft8.gif") no-repeat left top;

      margin:0;

      padding:0 0 0 4px;

      text-decoration:none;

      }

    #tabs8 a span {

      float:left;

      display:block;

      background:url("tabright8.gif") no-repeat right top;

      padding:5px 15px 4px 6px;

      color:#333;

      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabs8 a span {float:none;}

    /* End IE5-Mac hack */

    #tabs8 a:hover span {

      color:#591333;

      }

    #tabs8 a:hover {

      background-position:0% -42px;

      }

    #tabs8 a:hover span {

      background-position:100% -42px;

      }

</style>

</head>

<body>

<div id="tabs8">

	<div style="width:1002px; margin:0 auto;">

  <ul>

    <li><a href="#" ><span> 市局主页 </span></a></li>

    <li><a href="#" ><span> 网站首页 </span></a></li>

    <li><a href="#" ><span> 刑大简介 </span></a></li>

    <li><a href="#" ><span> 刑事技术 </span></a></li>

    <li><a href="#" ><span> 视频点播 </span></a></li>

    <li><a href="#" ><span> 图片新闻 </span></a></li>

    <li><a href="#" ><span> 值 班 表 </span></a></li>

    <li><a href="#" ><span> 通 讯 录 </span></a></li>

  </ul>

 </div>

</div>

</body>

</html>


试试
Fairstay 2011-07-26
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 hongmei85 的回复:]
这样？

<!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=……
[/Quote]
没有用，导航条还是居中，左右都有空
hongmei85 2011-07-26
  • 打赏
  • 举报
 回复
这样？

<!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>
<style type="text/css">
body {
margin:0;
padding:0;
font: bold 21px/1.5em Verdana;
}
img {
border: none;
}
/*- Menu Tabs 8--------------------------- */

#tabs8{width:1002px;background-color:#f00;}
#tabs8 ul {
margin:0;
padding:1px 10px 0 50px;
list-style:none;
}
#tabs8 li {
display:inline;
margin:0;
padding:0;
}
#tabs8 a {
float:left;
background:url("tableft8.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs8 a span {
float:left;
display:block;
background:url("tabright8.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#333;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs8 a span {float:none;}
/* End IE5-Mac hack */
#tabs8 a:hover span {
color:#591333;
}
#tabs8 a:hover {
background-position:0% -42px;
}
#tabs8 a:hover span {
background-position:100% -42px;
}
</style>
</head>
<body>
<div id="tabs8">
<ul>
<li><a href="#" ><span> 市局主页 </span></a></li>
<li><a href="#" ><span> 网站首页 </span></a></li>
<li><a href="#" ><span> 刑大简介 </span></a></li>
<li><a href="#" ><span> 刑事技术 </span></a></li>
<li><a href="#" ><span> 视频点播 </span></a></li>
<li><a href="#" ><span> 图片新闻 </span></a></li>
<li><a href="#" ><span> 值 班 表 </span></a></li>
<li><a href="#" ><span> 通 讯 录 </span></a></li>
</ul>
</div>
</body>
</html>
Fairstay 2011-07-26
  • 打赏
  • 举报
 回复
我希望的结果就是导航条的左右能正好抵到浏览器边框，可是用css我不知道如何实现这个效果
手机Python图形界面教程
本教程来自iniwap.cn！转载请注明出处！ 作者：┈┾夨憶D*.亼ぺ 目录： 『第一课』图形界面标准模版 『第二课』基本绘图函数详解 『第三课』绘图高级函数详解 『第四课』教你如何利用前几节的知识画五角星 『第五课』利用高级绘图函数画图 『第六课』常用几何数学公式详解 『第七课』如何利用上节讲的函数画出一条正弦曲线 『第八课』教你如何利用上节的知识让曲线动起来 『第九课』教你如何移动物体 『第十课』加深一些数学公式在绘图中的应用 『第十一课』游戏初步如何用图片做背景 『第十二课』教你如何对图片进行操作 『第十三课』图形界面终极使用 『第十四课』怎样利用所学知识玩转你的图片 『第十五课』教你如何实现图片透明的效果 『第十六课』教你如何利用色彩产生立体效果 『第十七课』教你如何用图形界面做菜单 『第十八课』游戏加载界面的设计(一) 『第十九课』游戏加载界面之闪屏的设计(二) 『第二十课』游戏玩家数据记录之数据库操作 『第二十一课』TopWindow在图形界面中的应用 『第二十二课』游戏中的角色移动的实现 『第二十三课』TopWindow用于图形菜单的一些探讨
16×16像素PNG图标集完整设计资源
本文还有配套的精品资源，点击获取 简介：在IT行业中，16×16像素的icon图标广泛应用于网页、软件和移动应用的用户界面中，因其小巧清晰、节省空间且支持透明背景而备受青睐。本资源包含1617个PNG格式的16×16图标，存储于“icons”文件夹中，并附带“icon.html”预览页面，便于开发者和设计师查看与使用。该图标集强调简洁性、色彩对比、符号通用性和风格一致性，适用于多平台界面设计。通过HTML、CSS与JavaScript的支持，可实现高效的展示与交互集成，是提升用户
Android 万能适配方案和UI屏幕适配 不同分辨率 最全面 最易懂的
文章目录1、屏幕尺寸2、屏幕分辨率3、屏幕像素密度 1、屏幕尺寸 屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米（下面有图文介绍） 比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等 2、屏幕分辨率 屏幕分辨率是指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素横向像素，如19601080。 3、屏幕像素密度 屏幕像素密度是指每英寸上的像素点数，单位是dpi，即“dot per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关**
Android 手机屏幕分辨率
屏幕尺寸屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米（下面有图文介绍）比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等屏幕分辨率屏幕分辨率是指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素，如1960*1080。屏幕像素密度屏幕像素密度是指每英寸上的像素点数，单位是dpi，即“dot per inch”的缩写。屏...
下面对于html状态码,2018京东前端笔试题
2018京东前端笔试题一、单选题+多选题1、匹配页面中输入的字符串，范围需要是[0.5,500]，小数位后最多保留两位，以下正则表达式不能实现该需求的是(B)A. (^[0]\.([5-9]\d?)$)|(((^[0-9])|(^[1-9]\d)|(^[1-4]\d{2}))(\.\d{1,2})?$)|(^500$)B. (^[0].([5-9]\d?)$)|((0|(^[1-9]?\d?)|(...
CSS

61,125

社区成员

60,706

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章