请大家帮我看一下我这段代码中的ul和a为什么不能显示在同一行中。_html/css

回复讨论(解决方案)

집

웹 프론트엔드

HTML 튜토리얼

请大家帮我看一下我这段代码中的ul和a为什么不能显示在同一行中。_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:22 PM

我现在用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;
}

<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:你的代码可以把位置调整，但也带来了新的问题，在后面的代码在鼠标移到菜单上去就会向右浮动。代码如下：

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代码，定位正常了，但鼠标移到菜单上后面的元素就会往后移。

<!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으로 문의하세요.