视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
请大家帮我看一下我这段代码中的ul和a为什么不能显示在同一行中。_html/css_WEB-ITnose
2020-11-27 15:45:08 责编:小采
文档


我现在用ul做了一个横向菜单,想把它放在“home”连接的右边,但我发现它运行时ul菜单始终会换行,是不是css出了问题,请大家给我指教一下,谢谢。建议用firefox浏览器运行。










Home

|


  • menu1

  • test1

  • test2

  • test3

  • test4



  • menu2

  • test5

  • test6







  • 回复讨论(解决方案)

    在线等,请大家帮忙。

    ul是块级元素,当然会换行,你可以强制它inline,其它自己调吧。
    ul { display:inline}

    把css的最后一行改成li:hover ul,.over ul { display:inline;}也不行,没办法只能用类似下面的坐标定位来调整了:
    ul{
    position:absolute;
    top: 10px;
    margin-left:100px;
    }

        Home | 
  • menu1
  • test1
  • test2
  • test3
  • test4
  • menu2
  • test5
  • test6

  • 这是在你写的基础上改的。

    oNA_na:你的代码可以把位置调整,但也带来了新的问题,在后面的代码在鼠标移到菜单上去就会向右浮动。代码如下:









    Home

    |



  • menu1

  • test1

  • test2

  • test3

  • test4



  • menu2

  • test5

  • test6







  • test data 1 test data 1 test data 1 test data 1 test data 1 test data 1


    test data 2



    test data 3 test data 3 test data 3test data 3 test data 3 test data 3test data 3 test data 3 test data 3


    这个定位问题很棘手也很急,我实在想不出来好的办法了,请大家帮忙。

    我重新修改了一下css代码,定位正常了,但鼠标移到菜单上后面的元素就会往后移。

    			prod menus				Home	 |	 	
  • menu1
  • test1
  • test2
  • test3
  • test4
  • menu2
  • test5
  • test6

  • test data 1 test data 1 test data 1 test data 1 test data 1 test data 1
    test data 2
    test data 3 test data 3 test data 3test data 3 test data 3 test data 3test data 3 test data 3 test data 3

    通过relative定位应该可以达到要求吧。

    在上面代码的基础上,我改了一下。

       prod menus  

    lichuny257,你的代码可用,可以用纯css实现此效果吗?

    下载本文
    显示全文
    专题