Maison >interface Web >tutoriel HTML >html中元素动态生成导致重叠引起布局错乱_html/css_WEB-ITnose

html中元素动态生成导致重叠引起布局错乱_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 11:36:271801parcourir

写了一个页面如图   左上角的“运送至:”后面是个ul,其中的li时通过js触法onmouseover动态生成的,ul下面的那个多快好省是个html中元素动态生成导致重叠引起布局错乱_html/css_WEB-ITnose,全局padding:0 ;margin:0;出现问题是当动态生成ul时布局错乱如图  怎么解决?难道把布局改为position:absolute  设置z-index?这样不好吧


回复讨论(解决方案)

没有什么好不好的。只要能实现就可以。一般都是菜单hidden在一个元素中.用js控制display.这样可以不用position:absolute,

你自己分析说下

ul 和后面img的关系

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>open source</title><style type="text/css">body{margin:0;padding:0}#nav{        display:inline-block;        width:200px;        height:50px;line-height:50px;        background-color:#ddd;}        #nav_menu{background-color:#f1f1f1;margin:0;padding:0}</style></head><body><span id="nav">        shanghai        <ul id="nav_menu">                <li>Address</li>                <li>Email</li>                <li>Map</li>        </ul></span></body></html>


   

没有什么好不好的。只要能实现就可以。一般都是菜单hidden在一个元素中.用js控制display.这样可以不用position:absolute,



用display可以控制列表是否显示,但是显示列表之后还是会影响下面的布局呀。这个是要设置 z 值么?

   


没有什么好不好的。只要能实现就可以。一般都是菜单hidden在一个元素中.用js控制display.这样可以不用position:absolute,



用display可以控制列表是否显示,但是显示列表之后还是会影响下面的布局呀。这个是要设置 z 值么? 这个不一定。如果元素溢出可以不用z-index



   


没有什么好不好的。只要能实现就可以。一般都是菜单hidden在一个元素中.用js控制display.这样可以不用position:absolute,



用display可以控制列表是否显示,但是显示列表之后还是会影响下面的布局呀。这个是要设置 z 值么? 这个不一定。如果元素溢出可以不用z-index
我把上面列表设置position:absolute布局解决了这个问题。
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn