求助！关于div居中。

vlikes 2017-01-09 11:34:18

百度logo是居中了，但下面的怎么也居中不了，怎么解决？
...全文
129 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
vlikes 2017-01-09
  • 打赏
  • 举报
 回复
引用 2 楼 yanluofeihong 的回复:
设置一下nav的宽度，设置margin：0 auto;
按你说的设置了 还是不行。。
引用 5 楼 yanluofeihong 的回复:
[quote=引用 4 楼 vlikes 的回复:] [quote=引用 2 楼 yanluofeihong 的回复:] 设置一下nav的宽度，设置margin：0 auto;
按你说的设置了 还是不行。。[/quote] 把代码发一遍，我找找问题所在[/quote] <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度</title> <style type="text/css"> <!-- .container{width:600px; text-align:center; margin:auto; padding:30px} #nav{list-style:none; margin:0 auto;} #nav li{float:left; display:inline;margin-right:10px;} a:link{text-decoration:none} a:hover{color: #FFF;background-color:#03C;} --> </style> </head> <body> <center> <img src="bdlogo.png" /> <div class="container"> <ul id="nav"> <a href="#" target="_blank"><li class="zixun">资讯</li></a> <a href="#" target="_blank"><li class="wangye">网页</li></a> <a href="#" target="_blank"><li class="tieba">贴吧</li></a> <a href="#" target="_blank"><li class="zhidao">知道</li></a> <a href="#" target="_blank"><li class="mp3">mp3</li></a> <a href="#" target="_blank"><li class="tupian">图片</li></a> <a href="#" target="_blank"><li class="gengduo">更多>></li></a> </ul> </div> </center> </body> </html>
看着是个昵称 2017-01-09
  • 打赏
  • 举报
 回复
引用 1 楼 LXH060204 的回复:
去掉 css 里面的 float:left
去掉浮动，东西就会竖排显示了
看着是个昵称 2017-01-09
  • 打赏
  • 举报
 回复
引用 4 楼 vlikes 的回复:
[quote=引用 2 楼 yanluofeihong 的回复:] 设置一下nav的宽度，设置margin：0 auto;
按你说的设置了 还是不行。。[/quote] 把代码发一遍，我找找问题所在
vlikes 2017-01-09
  • 打赏
  • 举报
 回复
引用 2 楼 yanluofeihong 的回复:
设置一下nav的宽度，设置margin：0 auto;
按你说的设置了 还是不行。。
vlikes 2017-01-09
  • 打赏
  • 举报
 回复
引用 1 楼 LXH060204 的回复:
去掉 css 里面的 float:left
去掉了导航栏就是竖的，要求是横的，不能去掉。。
看着是个昵称 2017-01-09
  • 打赏
  • 举报
 回复
设置一下nav的宽度，设置margin：0 auto;
JJYY0088 2017-01-09
  • 打赏
  • 举报
 回复
去掉 css 里面的 float:left
vlikes 2017-01-09
  • 打赏
  • 举报
 回复
引用 8 楼 yanluofeihong 的回复:
[quote=引用 7 楼 vlikes 的回复:] [quote=引用 2 楼 yanluofeihong 的回复:] 设置一下nav的宽度，设置margin：0 auto;
按你说的设置了 还是不行。。
引用 5 楼 yanluofeihong 的回复:
[quote=引用 4 楼 vlikes 的回复:] [quote=引用 2 楼 yanluofeihong 的回复:] 设置一下nav的宽度，设置margin：0 auto;
按你说的设置了 还是不行。。[/quote] 把代码发一遍，我找找问题所在[/quote] <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度</title> <style type="text/css"> <!-- .container{width:600px; text-align:center; margin:auto; padding:30px} #nav{list-style:none; margin:0 auto;} #nav li{float:left; display:inline;margin-right:10px;} a:link{text-decoration:none} a:hover{color: #FFF;background-color:#03C;} --> </style> </head> <body> <center> <img src="bdlogo.png" /> <div class="container"> <ul id="nav"> <a href="#" target="_blank"><li class="zixun">资讯</li></a> <a href="#" target="_blank"><li class="wangye">网页</li></a> <a href="#" target="_blank"><li class="tieba">贴吧</li></a> <a href="#" target="_blank"><li class="zhidao">知道</li></a> <a href="#" target="_blank"><li class="mp3">mp3</li></a> <a href="#" target="_blank"><li class="tupian">图片</li></a> <a href="#" target="_blank"><li class="gengduo">更多>></li></a> </ul> </div> </center> </body> </html> [/quote] 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度</title>
<style type="text/css">
body{
    margin: 0;
    padding: 0;
}
body center img{margin-top: 20px;}
  .container{width:600px;  margin:0 auto;margin-top: 20px; }
  #nav{list-style:none; width:500px; margin:0 auto;}
  #nav li{float:left; margin-right:10px;width: 60px;}
  a:link{text-decoration:none;}
  a:hover{color: #FFF;background-color:#03C;}

</style>
</head>

<body>
<center>
<img src="bdlogo.png" />
  <div class="container">
    <ul id="nav">
      <li class="zixun"><a href="#" target="_blank">资讯</a></li>
      <li class="wangye"><a href="#" target="_blank">网页</a></li>
      <li class="tieba"><a href="#" target="_blank">贴吧</a></li>
      <li class="zhidao"><a href="#" target="_blank">知道</a></li>
      <li class="mp3"><a href="#" target="_blank">mp3</a></li>
      <li class="tupian"><a href="#" target="_blank">图片</a></li>
      <li class="gengduo"><a href="#" target="_blank">更多>></a></li>
      <div style="clear: both;"></div>
    </ul>
  </div>
</center>
</body>
</html>
[/quote] 谢谢！！
看着是个昵称 2017-01-09
  • 打赏
  • 举报
 回复
引用 7 楼 vlikes 的回复:
[quote=引用 2 楼 yanluofeihong 的回复:] 设置一下nav的宽度，设置margin：0 auto;
按你说的设置了 还是不行。。
引用 5 楼 yanluofeihong 的回复:
[quote=引用 4 楼 vlikes 的回复:] [quote=引用 2 楼 yanluofeihong 的回复:] 设置一下nav的宽度，设置margin：0 auto;
按你说的设置了 还是不行。。[/quote] 把代码发一遍，我找找问题所在[/quote] <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度</title> <style type="text/css"> <!-- .container{width:600px; text-align:center; margin:auto; padding:30px} #nav{list-style:none; margin:0 auto;} #nav li{float:left; display:inline;margin-right:10px;} a:link{text-decoration:none} a:hover{color: #FFF;background-color:#03C;} --> </style> </head> <body> <center> <img src="bdlogo.png" /> <div class="container"> <ul id="nav"> <a href="#" target="_blank"><li class="zixun">资讯</li></a> <a href="#" target="_blank"><li class="wangye">网页</li></a> <a href="#" target="_blank"><li class="tieba">贴吧</li></a> <a href="#" target="_blank"><li class="zhidao">知道</li></a> <a href="#" target="_blank"><li class="mp3">mp3</li></a> <a href="#" target="_blank"><li class="tupian">图片</li></a> <a href="#" target="_blank"><li class="gengduo">更多>></li></a> </ul> </div> </center> </body> </html> [/quote] 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度</title>
<style type="text/css">
body{
    margin: 0;
    padding: 0;
}
body center img{margin-top: 20px;}
  .container{width:600px;  margin:0 auto;margin-top: 20px; }
  #nav{list-style:none; width:500px; margin:0 auto;}
  #nav li{float:left; margin-right:10px;width: 60px;}
  a:link{text-decoration:none;}
  a:hover{color: #FFF;background-color:#03C;}

</style>
</head>

<body>
<center>
<img src="bdlogo.png" />
  <div class="container">
    <ul id="nav">
      <li class="zixun"><a href="#" target="_blank">资讯</a></li>
      <li class="wangye"><a href="#" target="_blank">网页</a></li>
      <li class="tieba"><a href="#" target="_blank">贴吧</a></li>
      <li class="zhidao"><a href="#" target="_blank">知道</a></li>
      <li class="mp3"><a href="#" target="_blank">mp3</a></li>
      <li class="tupian"><a href="#" target="_blank">图片</a></li>
      <li class="gengduo"><a href="#" target="_blank">更多>></a></li>
      <div style="clear: both;"></div>
    </ul>
  </div>
</center>
</body>
</html>
div垂直居中-CSS元素垂直居中方法的探究
针对学员疑问“div垂直居中？”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程，课程包含两方面：1、文本垂直居中的解决方案；2、块级元素垂直居中的解决方案。
DIV布局和CSS精讲
课程简介： 1，html5编辑器的介绍和使用 2，块标签 3，内联标签 4，超链接和锚点 5，12种选择器 6，颜色 7，单位 8，css属性 9，盒模式 10，div布局 11，内容图片 12，布局图片 13，用户交互图片 14，字体 15，表单...
html+div+css初级入门到制作企业站视频课程
本套html,div&css;课程完全初级, 通过学习DIV+CSS, 了解分清html div css三者关联&作用, 通过一个企业站首页排版掌握html,div+css
Div+Css页面布局实战
本套课程主要通过实战的方式让您快速学会网页布局，修改网页中的文本、背景、排版布局等，使开发者可以根据自己的需求设置不同的样式风格。
2周搞定HTML+PS切图+DIV+CSS+移动布局+项目实战
课程特色：课程通俗易懂，实战性非常强，步骤详细，上手简单。 适用人群：非常适合初级学员、在校大学生、实习生，亦或是上班族，对网页制作有浓厚的兴趣，想步入开发殿堂的极客们！掌握基本的、当下流行的前端网页...
CSS

61,112

社区成员

60,730

社区内容

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

加载中

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

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

+ 用AI写文章