设为首页收藏本站
开启辅助访问 切换到宽版

小白教程

 找回密码
 立即注册
热搜: python PHP html
小白教程»小白交流区 › 技术交流区 › Python › css样式浮动不会紧贴左边部分是为什么
返回列表 发新帖
查看: 15106|回复: 6

[已解决]css样式浮动不会紧贴左边部分是为什么

[复制链接]
妖風習習

1

主题

1

帖子

3

积分

新手上路

Rank: 1

积分
3
发表于 2021-4-17 18:23:37 | 显示全部楼层 |阅读模式
  1. <html>
  2. <head>
  3. <title>导航条练习</title>
  4. <style type="text/css">
  5. .*{
  6. margin:0;
  7. padding:0;
  8. }

  10. .nav{
  11. list-style:none;
  12. background-color:PowderBlue;
  13. width:1000px;
  14. margin:50px auto;

  16. }
  17. .nav li{
  18. float:left;
  19. width:25%;

  21. }

  23. .nav li a{
  24. display:block;
  25. width:100%;
  26. margin:0 auto;
  27. padding:5px 0;
  28. text-align:center;
  29. text-decoration:none;
  30. }
  31. a:hover{
  32. background-color:Coral;

  34. }
  35. .clearfix:after{
  36. content:"";
  37. display:block;
  38. clear:both;

  40. }

  42. </style>

  44. </head>
  45. <body>
  46. <ul class="nav clearfix">
  47. <li><a href=#>首页</a>
  48. <li><a href=#>我们</a>
  49. <li><a href=#>刷新</a>
  50. <li><a href=#>联系</a>
  51. </ul>
  52. </body>   
  53. <html>
复制代码


最佳答案
来啊互喷啊
2021-5-9 10:01:32
  1. <html>
  2. <head>
  3. <title>导航条练习</title>
  4. <style type="text/css">
  5. .*{
  6. margin:0;
  7. padding:0;
  8. }

  10. .nav{
  11. list-style:none;
  12. background-color:orangered;
  13. width:1000px;
  14. margin:50px auto;
  15. float:left;
  16. }
  17. .nav li{
  18. float:left;
  19. width:25%;

  21. }

  23. .nav li a{
  24. display:block;
  25. width:100%;
  26. margin:0 auto;
  27. padding:5px 0;
  28. text-align:center;
  29. text-decoration:none;
  30. }
  31. a:hover{
  32. background-color:Coral;

  34. }
  35. .clearfix:after{
  36. content:"";
  37. display:block;
  38. clear:both;

  40. }

  42. </style>

  44. </head>
  45. <body>
  46. <ul class="nav clearfix">
  47. <li><a href=#>a</a>
  48. <li><a href=#>b</a>
  49. <li><a href=#>c</a>
  50. <li><a href=#>d</a>
  51. </ul>
  52. </body>   
  53. <html>
复制代码

稍微修改了一下你的代码，只需要在nav选择器中添加属性float:left;就可以解决了
回复

使用道具 举报

忆难忘

0

主题

1

帖子

2

积分

新手上路

Rank: 1

积分
2
发表于 2021-4-23 00:30:44 | 显示全部楼层
如果您不想解决旧项目遗留下来的问题，建议使用Flex或Gird布局
回复

使用道具 举报

周良雄

0

主题

1

帖子

2

积分

新手上路

Rank: 1

积分
2
发表于 2021-4-27 13:03:22 | 显示全部楼层
  1. .nav{
  2. list-style:none;
  3. background-color:PowderBlue;
  4. width:1000px;
  5. margin:50px auto;
  6. <span style="color: #FF0000;">padding:0;</span>
  7. }
复制代码
回复

使用道具 举报

情缘殇偉少

0

主题

1

帖子

2

积分

新手上路

Rank: 1

积分
2
发表于 2021-5-2 02:16:35 | 显示全部楼层
  1. <html>

  3. <head>
  4.     <title>导航条练习</title>
  5.     <style type="text/css">
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.         }
  10.          
  11.         a {
  12.             text-decoration: none;
  13.         }
  14.          
  15.         .nav {
  16.             list-style: none;
  17.             width: 1000px;
  18.             margin: 50px auto;
  19.             display: flex;
  20.             justify-content: space-between;
  21.         }
  22.          
  23.         .item {
  24.             background-color: PowderBlue;
  25.             text-align: center;
  26.             padding: 5px;
  27.             width: 25%;
  28.         }
  29.          
  30.         .item:hover {
  31.             background-color: rgb(190, 226, 89);
  32.         }
  33.     </style>

  35. </head>

  37. <body>
  38.     <ul class="nav">
  39.         <li class="item"><a href=#>首页</a></li>
  40.         <li class="item"><a href=#>我们</a></li>
  41.         <li class="item"><a href=#>刷新</a></li>
  42.         <li class="item"><a href=#>联系</a></li>
  43.     </ul>
  44. </body>
  45. <html>
复制代码
回复

使用道具 举报

来啊互喷啊

0

主题

2

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2021-5-9 10:01:32 | 显示全部楼层 &
  1. <html>
  2. <head>
  3. <title>导航条练习</title>
  4. <style type="text/css">
  5. .*{
  6. margin:0;
  7. padding:0;
  8. }

  10. .nav{
  11. list-style:none;
  12. background-color:orangered;
  13. width:1000px;
  14. margin:50px auto;
  15. float:left;
  16. }
  17. .nav li{
  18. float:left;
  19. width:25%;

  21. }

  23. .nav li a{
  24. display:block;
  25. width:100%;
  26. margin:0 auto;
  27. padding:5px 0;
  28. text-align:center;
  29. text-decoration:none;
  30. }
  31. a:hover{
  32. background-color:Coral;

  34. }
  35. .clearfix:after{
  36. content:"";
  37. display:block;
  38. clear:both;

  40. }

  42. </style>

  44. </head>
  45. <body>
  46. <ul class="nav clearfix">
  47. <li><a href=#>a</a>
  48. <li><a href=#>b</a>
  49. <li><a href=#>c</a>
  50. <li><a href=#>d</a>
  51. </ul>
  52. </body>   
  53. <html>
复制代码

稍微修改了一下你的代码，只需要在nav选择器中添加属性float:left;就可以解决了
回复

使用道具 举报

真的勇士

0

主题

1

帖子

2

积分

新手上路

Rank: 1

积分
2
发表于 2021-5-10 15:22:02 | 显示全部楼层
您可以在浏览器中右键单击并进行检查。然后转到主页上的方框。一般来说，你可以通过改变边距和填充来移动位置，这也是一个相对较小的白色练习。
您可以调整浏览器活动面板中的数据，直到您认为没问题为止，然后返回到环境软件(DW或Sublime)来修改它
回复

使用道具 举报

江南云鹤

0

主题

1

帖子

2

积分

新手上路

Rank: 1

积分
2
发表于 2021-5-19 01:53:21 | 显示全部楼层
会不会是因为body标签的内边距或外边距？可以试试
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|小白教程 ( 粤ICP备20019910号 )

GMT+8, 2025-5-1 08:16 , Processed in 0.058785 second(s), 29 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc. Template By 【未来科技】【 www.wekei.cn 】

快速回复 返回顶部 返回列表