目录
请大家帮我看一下我这段代码中的ul和a为什么不能显示在同一行中。_html/css_WEB-ITnose
我现在用ul做了一个横向菜单，想把它放在“home”连接的右边，但我发现它运行时ul菜单始终会换行，是不是css出了问题，请大家给我指教一下，谢谢。建议用firefox浏览器运行。
Home
|
回复讨论(解决方案)
在线等，请大家帮忙。
ul是块级元素，当然会换行，你可以强制它inline，其它自己调吧。
ul { display:inline}
把css的最后一行改成li:hover ul,.over ul { display:inline;}也不行，没办法只能用类似下面的坐标定位来调整了：
ul{
position:absolute;
top: 10px;
margin-left:100px;
}
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <style> ul { padding:0; margin:0; list-style:none;display: inline;} li { float:left; width:140px; } ul li a { text-decoration:none; color:#777;} li:hover { background-color:#ddd;} ul li ul li table{ background-color:#ddd;} li ul { display:none;} li:hover ul,.over ul { display:block;} </style></head><body><div style="float: left;"> <a style="color:red;" > Home </a> | </div><ul style="float: left;"> <li><a href="">menu1</a> <ul> <li><a href="">test1</a></li> <li><a href="">test2</a></li> <li><a href="">test3</a></li> <li><a href="">test4</a></li> </ul> </li> <li><a href="javascript:void(0);">menu2</a> <ul> <li><a href="">test5</a></li> <li><a href="">test6</a></li> </ul> </li></ul></body></html>登录后复制
这是在你写的基础上改的。
oNA_na:你的代码可以把位置调整，但也带来了新的问题，在后面的代码在鼠标移到菜单上去就会向右浮动。代码如下：
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代码，定位正常了，但鼠标移到菜单上后面的元素就会往后移。
<!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 content="text/html; charset=utf-8" http-equiv="content-type"> <title>prod menus</title> <style> ul.hMenu,ul.hMenu li ul { padding:0; margin:0; list-style:none;} ul.hMenu li { float:left; width:140px; } ul.hMenu li:hover a { color:red;} ul.hMenu li:hover { background-color:yellow;} ul.hMenu li ul li table{ background-color:yellow;} ul.hMenu li ul { display:none;} ul.hMenu li:hover ul,.over ul { display:block;} .eth{text-align:left;} </style> </head> <body> <div style="float: left;"> <a style="color:red;" > Home </a> | </div> <ul class="hMenu"> <li><a href="">menu1</a> <ul> <li><a href="">test1</a></li> <li><a href="">test2</a></li> <li><a href="">test3</a></li> <li><a href="">test4</a></li> </ul> </li> <li><a>menu2 </a> <ul> <li><a href="">test5</a></li> <li><a href="">test6</a></li> </ul> </li> </ul> <br/> test data 1 test data 1 test data 1 test data 1 test data 1 test data 1 <br/> test data 2 <br/> <a href="">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</a> </body></html>登录后复制
通过relative定位应该可以达到要求吧。
在上面代码的基础上，我改了一下。
<!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 content="text/html; charset=utf-8" http-equiv="content-type"> <title>prod menus</title> <style> /*ul.hMenu,ul.hMenu li ul { padding:0; margin:0; list-style:none;}*/ /*ul.hMenu li { float:left; width:140px; }*/ /*ul.hMenu li:hover a { color:red;} */ /*ul.hMenu li:hover { background-color:yellow;}*/ /*ul.hMenu li ul li table{ background-color:yellow;} */ /*ul.hMenu li ul { display:none;}*/ /*ul.hMenu li:hover ul,.over ul { display:block;}*/ /**/ /*.eth{text-align:left;}*/ .hMenu { margin: 0; padding: 0; z-index: 30; width: 480px; height:23px;} .hMenu li { margin: 0; padding: 0; list-style: none; float: left; width:140px; } .hMenu li a { display: block; width: 140px; color:red; text-align: left; text-decoration: none} .hMenu li a:hover { background: yellow} .hMenu div { position: absolute; visibility: hidden; margin: 0; padding: 0; } .hMenu div a { position: relative; display: block; width: 140px; white-space: nowrap; text-align: left; text-decoration: none; background: yellow; color:red } </style> <script type="text/javascript"> var timeout = 100; var delaytime = 0; var ddmenuitem = 0; function mopen(id) { mcancelclosetime(); if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } function mclosedelay() { delaytime = window.setTimeout(mclose, timeout); } function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } function mcancelclosetime() { if(delaytime) { window.clearTimeout(delaytime); delaytime = null; } } </script> </head> <body> <div style="float: left;"> <a style="color:red;" > Home </a> | </div> <ul class="hMenu"> <li><a href="" onmouseover="mopen('m1')" onmouseout="mclosedelay()">menu1</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosedelay()"> <a href="">test1</a> <a href="">test2</a> <a href="">test3</a> <a href="">test4</a> </div> </li> <li><a href="" onmouseover="mopen('m2')" onmouseout="mclosedelay()">menu2 </a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosedelay()"> <a href="">test5</a> <a href="">test6</a> </div> </li> </ul> <br/> test data 1 test data 1 test data 1 test data 1 test data 1 test data 1 <br/> test data 2 <br/> <a href="">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</a> </body></html>登录后复制
lichuny257,你的代码可用，可以用纯css实现此效果吗？
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前
By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
我如何使用html5＆lt; time＆gt; 元素以语义表示日期和时间？
Mar 12, 2025 pm 04:05 PM
本文解释了HTML5＆lt; time＆gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性（ISO 8601格式）的重要性，并在人类可读文本旁边，增强Accessibilit
如何使用HTML5表单验证属性来验证用户输入？
Mar 17, 2025 pm 12:27 PM
本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
