HTML DIV百分比宽度奇奇怪怪的间距产生了？

a596643025 2014-07-16 01:04:00
最近做站的时候要做个用户卡，顺着自己做的DEMO做，本来DEMO好好的结果放到测试站点里面变成这样...
DEMO运行的时候好好的啊，下面这图不是DEMO本体，是直接从站点上面扒下来的HTML代码然后在源文件里面加上CSS的效果
说白了是个Discuz论坛拉，但是为何会出现这种莫名其妙的间距问题，我去百度了很多也没找到。好像是显示模式引发的，但是在DEMO里面用同样的显示模式一点问题也没有。我之所以这样讲是因为当display模式设置成flex以后就没有了这些间距。
源码文件的话我发一下，用以替换discuz论坛里面的header_userstatus.htm还有header.htm在回复里面发吧，长度过了。

<!--{if $_G['uid']}-->

<div id="um">

	<div class="avt y" style="display:none;"><a href="home.php?mod=space&uid=$_G[uid]"><!--{avatar($_G[uid],small)}--></a></div>

	<div id="d_avt_menu">

		<div class="d_upt">

			<strong class="vwmy{if $_G['setting']['connect']['allow'] && $_G[member][conisbind]} qq{/if}"><a href="home.php?mod=space&uid=$_G[uid]" target="_blank" title="{lang visit_my_space}"class="showmenu" onmouseover="showMenu({'ctrlid':'myitem'});">{$_G[member][username]}</a></strong>

			<!--{if $_G['group']['allowinvisible']}-->

			<span id="loginstatus">

				<a id="loginstatusid" href="member.php?mod=switchstatus" title="{lang login_switch_invisible_mode}" onclick="ajaxget(this.href, 'loginstatus');return false;" class="xi2"></a>

			</span>

			<!--{/if}-->

			<div>

			<!--{hook/global_usernav_extra1}-->

			</div>

		</div>

		<div class="d_upm">

			<!--{hook/global_usernav_extra4}-->

			<div class="d_upmr d_upmr1">

				<!--{if $_G['uid']}-->

				<div><a href="home.php?mod=space&do=pm" id="pm_ntc" style="background-repeat: no-repeat; background-position: 0 50%;"><em class="prompt_news{if empty($_G[member][newpm])}_0{/if}"></em>{lang pm_center}</a></div>

				<div><a href="home.php?mod=follow&do=follower"><em class="prompt_follower{if empty($_G[member][newprompt_num][follower])}_0{/if}"></em><!--{lang notice_interactive_follower}-->{if $_G[member][newprompt_num][follower]}($_G[member][newprompt_num][follower]){/if}</a></div>

				<!--{if $_G[member][newprompt] && $_G[member][newprompt_num][follow]}-->

					<div><a href="home.php?mod=follow"><em class="prompt_concern"></em><!--{lang notice_interactive_follow}-->($_G[member][newprompt_num][follow])</a></div>

				<!--{/if}-->

				<!--{if $_G[member][newprompt]}-->

					<!--{loop $_G['member']['category_num'] $key $val}-->

						<div><a href="home.php?mod=space&do=notice&view=$key"><em class="notice_$key"></em><!--{echo lang('template', 'notice_'.$key)}-->(<span class="rq">$val</span>)</a></div>

					<!--{/loop}-->

				<!--{/if}-->

				<!--{if empty($_G['cookie']['ignore_notice'])}-->

					<div class="ignore_noticeli"><a href="javascript:;" onclick="setcookie('ignore_notice', 1);hideMenu('myprompt_menu')" title="{lang temporarily_to_remind}"><em class="ignore_notice"></em></a></div>

				<!--{/if}-->

				<!--{/if}-->

				<!--{if $_G['setting']['taskon'] && !empty($_G['cookie']['taskdoing_'.$_G['uid']])}--><div><a href="home.php?mod=task&item=doing" id="task_ntc" class="new">{lang task_doing}</a></div><!--{/if}-->

				<!--{if ($_G['group']['allowmanagearticle'] || $_G['group']['allowpostarticle'] || $_G['group']['allowdiy'] || getstatus($_G['member']['allowadmincp'], 4) || getstatus($_G['member']['allowadmincp'], 6) || getstatus($_G['member']['allowadmincp'], 2) || getstatus($_G['member']['allowadmincp'], 3))}-->

				<div><a href="portal.php?mod=portalcp"><!--{if $_G['setting']['portalstatus'] }-->{lang		portal_manage}<!--{else}-->{lang portal_block_manage}<!--{/if}--></a></div>

				<!--{/if}-->

				</div>

				<div class="d_upmr d_upmr2">

				<div><a href="javascript:;" id="myitem" class="showmenu" onmouseover="showMenu({'ctrlid':'myitem'});">{lang myitem}</a></div>

				<div><a href="home.php?mod=spacecp">{lang setup}</a></div>

					<!--{if $_G['uid'] && $_G['group']['radminid'] > 1}-->

				<div>

					<a href="forum.php?mod=modcp&fid=$_G[fid]" target="_blank">{lang forum_manager}</a>

				</div>

					<!--{/if}-->

					<!--{if $_G['uid'] && getstatus($_G['member']['allowadmincp'], 1)}-->

				<div>

					<a href="admin.php" target="_blank">{lang admincp}</a>

				</div>

				<!--{/if}-->

			</div>

			<!--{hook/global_usernav_extra2}-->

	</div>

	<div class="d_upb">

		<!--{hook/global_usernav_extra3}-->

		<div><a href="home.php?mod=spacecp&ac=credit&showcredit=1" id="extcreditmenu"{if !$_G[setting][bbclosed]} onmouseover="delayShow(this, showCreditmenu);" class="showmenu"{/if}>{lang credits}: $_G[member][credits]</a></div>

		<div><a href="home.php?mod=spacecp&ac=usergroup" id="g_upmine" class="showmenu" onmouseover="delayShow(this, showUpgradeinfo)">{lang usergroup}: $_G[group][grouptitle]<!--{if $_G[member]['freeze']}--><span class="xi1">({lang freeze})</span><!--{/if}--></a></div>

		<div><a href="member.php?mod=logging&action=logout&formhash={FORMHASH}">{lang logout}</a></div>

	</div>



</div>

<!--{elseif !empty($_G['cookie']['loginuser'])}-->

<p>

	<strong><a id="loginuser" class="noborder"><!--{echo dhtmlspecialchars($_G['cookie']['loginuser'])}--></a></strong>

	<a href="member.php?mod=logging&action=login" onclick="showWindow('login', this.href)">{lang activation}</a>

	<a href="member.php?mod=logging&action=logout&formhash={FORMHASH}">{lang logout}</a>

</p>

<!--{elseif !$_G[connectguest]}-->

<!--{template member/login_simple}-->

<!--{else}-->

<div id="um">

	<div class="avt y"><!--{avatar(0,small)}--></div>

	<p>

		<strong class="vwmy qq">{$_G[member][username]}</strong>

		<!--{hook/global_usernav_extra1}-->

		<span class="pipe">|</span><a href="member.php?mod=logging&action=logout&formhash={FORMHASH}">{lang logout}</a>

	</p>

	<p>

		<a href="home.php?mod=spacecp&ac=credit&showcredit=1">{lang credits}: 0</a>

		<span class="pipe">|</span>{lang usergroup}: $_G[group][grouptitle]

	</p>

</div>

<!--{/if}-->

<!--{if $_G['uid']}-->

	<script language=javascript>

		var panelstat = 0;

		var panelheight;

		var panelo;

		var davt;

		jQ(window).load(	

			function() {

				davt = document.getElementById('d_avt');

				panelo = document.getElementById('d_avt_menu');

				panelo.style.top=davt.offsetTop+davt.offsetHeight+"px";

				panelo.style.left=davt.offsetLeft+davt.offsetWidth-panelo.offsetWidth+"px";

				panelo.style.display='block';

				panelheight=document.getElementById('d_avt_menu').offsetHeight;

				panelo.style.height="0px"

				panelo.style.transition="all 0.2s linear";

			}

		)

		function changepanel()

		{

			if(panelstat==1){

				panelo.style.height="0px";

				panelo.style.boxShadow="0 0 0px rgba(0,0,0,0.3)"

				panelstat=0;

			}else{

				panelo.style.left=davt.offsetLeft+davt.offsetWidth-panelo.offsetWidth+"px";

				panelo.style.top=davt.offsetTop+davt.offsetHeight+"px";

				panelo.style.height=panelheight+"px";

				panelo.style.boxShadow="0 0 10px rgba(0,0,0,0.3)"

				panelstat=1;

			}

		}

	</script>

<!--{/if}-->



样式表的话把下面这些代码写到common.css里面，由于都是附加的样式所以可以直接写，随便写。
.d_upmr1 div {

    width: 25%;

}

.d_upmr div {

    display: inline-block;

    height: 50%;

    line-height: 60px;

    text-align: center;

}

.d_upmr2 div {

    width: 33.3%;

}

.d_upmr div a {

    text-decoration: none;

    color: white;

    text-shadow: 0 0 10px rgba(0,0,0,0.3);

    background-color: rgba(255,255,255,0.3);

    width: 100%;

    height: 100%;

    display: block;

    transition: 0.2s linear;

}

.d_upmr div a:hover {

    color: red;

    background-color: rgba(255,255,255,0.8);

    box-shadow: 0 0 10px rgba(0,0,0,0.3);

}

a {transition:0.2s linear;transition-property:color,background-color;}

a:hover {text-decoration:none;color:red;}



.d_upt {background:rgba(255,255,255,0.5);text-align:center;height:60px;line-height:60px;}

.d_upt .pipe {color:transparent;}

.d_upm {border-top:1px solid #CDCDCD;}

.d_upm em {display: none;}

.d_upb {background:rgba(255,255,255,0.5);padding:0 10px;text-align:center;}

.d_upb a:hover {color:	red !important;}

.d_upb a {color:black !important;}



#d_avt {border: 2px solid rgba(255,255,255,0.3);font-size: 15px;float: right;width: 48px;height: 48px;text-align: center;line-height: 44px;background: #FFF;box-shadow: 0 0 10px rgba(0,0,0,0.2);cursor: pointer;}

#d_avt a {color:rgba(20,50,255,0.5);height:48px;line-height:48px;width:	48px;text-align:center;display:block;}

#d_avt a:hover {color:red;}

#d_avt_menu {background:rgba(255,255,255,0.3);width:300px;box-shadow:0 0 10px rgba(0,0,0,0.3);overflow:hidden;left:auto;top:0px;position:fixed;display:none;}

感谢各位大大赏脸一读，如果能有大神来帮忙解决的话更好，这个问题实在太奇怪了我从来都没见过,不得已才来这里求助，第一次来这里如果有触犯什么规则或者什么不好的东西的话还请见谅！我会修改的！
...全文
316 1 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
a596643025 2014-07-16
  • 打赏
  • 举报
 回复 
<!--{subtemplate common/header_common}-->
	<meta name="application-name" content="$_G['setting']['bbname']" />
	<meta name="msapplication-tooltip" content="$_G['setting']['bbname']" />
	<!--{if $_G['setting']['portalstatus']}--><meta name="msapplication-task" content="name=$_G['setting']['navs'][1]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['portal']) ? 'http://'.$_G['setting']['domain']['app']['portal'] : $_G[siteurl].'portal.php'};icon-uri={$_G[siteurl]}{IMGDIR}/portal.ico" /><!--{/if}-->
	<meta name="msapplication-task" content="name=$_G['setting']['navs'][2]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['forum']) ? 'http://'.$_G['setting']['domain']['app']['forum'] : $_G[siteurl].'forum.php'};icon-uri={$_G[siteurl]}{IMGDIR}/bbs.ico" />
	<!--{if $_G['setting']['groupstatus']}--><meta name="msapplication-task" content="name=$_G['setting']['navs'][3]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['group']) ? 'http://'.$_G['setting']['domain']['app']['group'] : $_G[siteurl].'group.php'};icon-uri={$_G[siteurl]}{IMGDIR}/group.ico" /><!--{/if}-->
	<!--{if helper_access::check_module('feed')}--><meta name="msapplication-task" content="name=$_G['setting']['navs'][4]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['home']) ? 'http://'.$_G['setting']['domain']['app']['home'] : $_G[siteurl].'home.php'};icon-uri={$_G[siteurl]}{IMGDIR}/home.ico" /><!--{/if}-->
	<!--{if $_G['basescript'] == 'forum' && $_G['setting']['archiver']}-->
		<link rel="archives" title="$_G['setting']['bbname']" href="{$_G[siteurl]}archiver/" />
	<!--{/if}-->
	<!--{if !empty($rsshead)}-->$rsshead<!--{/if}-->
	<!--{if widthauto()}-->
		<link rel="stylesheet" id="css_widthauto" type="text/css" href='{$_G['setting']['csspath']}{STYLEID}_widthauto.css?{VERHASH}' />
		<script type="text/javascript">HTMLNODE.className += ' widthauto'</script>
	<!--{/if}-->
	<!--{if $_G['basescript'] == 'forum' || $_G['basescript'] == 'group'}-->
		<script type="text/javascript" src="{$_G[setting][jspath]}forum.js?{VERHASH}"></script>
	<!--{elseif $_G['basescript'] == 'home' || $_G['basescript'] == 'userapp'}-->
		<script type="text/javascript" src="{$_G[setting][jspath]}home.js?{VERHASH}"></script>
	<!--{/if}-->
	<!--{if $_G['basescript'] != 'portal' || $_GET['diy'] == 'yes' && check_diy_perm($topic)}-->
		<script type="text/javascript" src="{$_G[setting][jspath]}portal.js?{VERHASH}"></script>
	<!--{/if}-->
	<!--{if $_GET['diy'] == 'yes' && check_diy_perm($topic)}-->
		<link rel="stylesheet" type="text/css" id="diy_common" href="{$_G['setting']['csspath']}{STYLEID}_css_diy.css?{VERHASH}" />
	<!--{/if}-->
</head>

<body id="nv_{$_G[basescript]}" class="pg_{CURMODULE}{if $_G['basescript'] === 'portal' && CURMODULE === 'list' && !empty($cat)} {$cat['bodycss']}{/if}" onkeydown="if(event.keyCode==27) return false;">
	<div id="append_parent"></div><div id="ajaxwaitid"></div>
	<!--{if $_GET['diy'] == 'yes' && check_diy_perm($topic)}-->
		<!--{template common/header_diy}-->
	<!--{/if}-->
	<!--{if check_diy_perm($topic)}-->
		<!--{template common/header_diynav}-->
	<!--{/if}-->
	<!--{if CURMODULE == 'topic' && $topic && empty($topic['useheader']) && check_diy_perm($topic)}-->
		$diynav
	<!--{/if}-->
	<!--{if empty($topic) || $topic['useheader']}-->
		<!--{if $_G['setting']['mobile']['allowmobile'] && (!$_G['setting']['cacheindexlife'] && !$_G['setting']['cachethreadon'] || $_G['uid']) && ($_GET['diy'] != 'yes' || !$_GET['inajax']) && ($_G['mobile'] != '' && $_G['cookie']['mobile'] == '' && $_GET['mobile'] != 'no')}-->
			<div class="xi1 bm bm_c">
			    {lang your_mobile_browser}<a href="{$_G['siteurl']}forum.php?mobile=yes">{lang go_to_mobile}</a> <span class="xg1">|</span> <a href="$_G['setting']['mobile']['nomobileurl']">{lang to_be_continue}</a>
			</div>
		<!--{/if}-->
		<!--{if $_G['setting']['shortcut'] && $_G['member'][credits] >= $_G['setting']['shortcut']}-->
			<div id="shortcut">
				<span><a href="javascript:;" id="shortcutcloseid" title="{lang close}">{lang close}</a></span>
				{lang shortcut_notice}
				<a href="javascript:;" id="shortcuttip">{lang shortcut_add}</a>

			</div>
			<script type="text/javascript">setTimeout(setShortcut, 2000);</script>
		<!--{/if}-->

		<!--{if !IS_ROBOT}-->
			<!--{if $_G['uid'] && !empty($_G['style']['extstyle'])}-->
				<div id="sslct_menu" class="cl p_pop" style="display: none;">
					<!--{if !$_G[style][defaultextstyle]}--><span class="sslct_btn" onclick="extstyle('')" title="{lang default}"><i></i></span><!--{/if}-->
					<!--{loop $_G['style']['extstyle'] $extstyle}-->
						<span class="sslct_btn" onclick="extstyle('$extstyle[0]')" title="$extstyle[1]"><i style='background:$extstyle[2]'></i></span>
					<!--{/loop}-->
				</div>
			<!--{/if}-->
			<!--{if $_G['uid']}-->
				<ul id="myitem_menu" class="p_pop" style="display: none;">
					<li><a href="forum.php?mod=guide&view=my">{lang mypost}</a></li>
					<li><a href="home.php?mod=space&do=favorite&view=me">{lang favorite}</a></li>
					<li><a href="home.php?mod=space&do=friend">{lang friends}</a></li>
					<!--{hook/global_myitem_extra}-->
				</ul>
			<!--{/if}-->
			<!--{subtemplate common/header_qmenu}-->
		<!--{/if}-->

		<!--{ad/headerbanner/wp a_h}-->
		<div id="hd">
			<!--{eval $mnid = getcurrentnav();}-->
			<div id="nv">
				<div class="wp">
					<div id="d_avt" {if $_G['uid']}onclick="changepanel()"{/if}>
						<!--{if $_G['uid']}-->
						<!--{avatar($_G[uid],small)}-->
						<!--{else}-->
						<a href="javascript:;" onclick="lsSubmit()">sign</a>
						<!--{/if}-->
					</div>
					<a href="javascript:;" id="qmenu" onmouseover="delayShow(this, function () {showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});showForummenu($_G[fid]);})">{lang my_nav}</a>
					<ul>
						<!--{loop $_G['setting']['navs'] $nav}-->
							<!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--><li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li><!--{/if}-->
							<!--{/loop}-->
					</ul>
					<!--subtemplate common/pubsearchform-->
					<!--{hook/global_nav_extra}-->
				</div>
			</div>
			<div class="wp">
				<div class="hdc cl">
					<h2><!--{if !isset($_G['setting']['navlogos'][$mnid])}--><a href="{if $_G['setting']['domain']['app']['default']}http://{$_G['setting']['domain']['app']['default']}/{else}./{/if}" title="$_G['setting']['bbname']">{$_G['style']['boardlogo']}</a><!--{else}-->$_G['setting']['navlogos'][$mnid]<!--{/if}--></h2>
					<!--{template common/header_userstatus}-->
				</div>

				<!--{if !empty($_G['setting']['plugins']['jsmenu'])}-->
					<ul class="p_pop h_pop" id="plugin_menu" style="display: none">
					<!--{loop $_G['setting']['plugins']['jsmenu'] $module}-->
						 <!--{if !$module['adminid'] || ($module['adminid'] && $_G['adminid'] > 0 && $module['adminid'] >= $_G['adminid'])}-->
						 <li>$module[url]</li>
						 <!--{/if}-->
					<!--{/loop}-->
					</ul>
				<!--{/if}-->
				$_G[setting][menunavs]
				<div id="mu" class="cl">
				<!--{if $_G['setting']['subnavs']}-->
					<!--{loop $_G[setting][subnavs] $navid $subnav}-->
						<!--{if $_G['setting']['navsubhover'] || $mnid == $navid}-->
						<ul class="cl {if $mnid == $navid}current{/if}" id="snav_$navid" style="display:{if $mnid != $navid}none{/if}">
						$subnav
						</ul>
						<!--{/if}-->
					<!--{/loop}-->
				<!--{/if}-->
				</div>
				<!--{ad/subnavbanner/a_mu}-->

			</div>
		</div>

		<!--{hook/global_header}-->
	<!--{/if}-->

	<div id="wp" class="wp">
这是HEADER.HTM的文件内容，那个用户卡点右上角的头像就会出来了
04DIV-CSS学习
04DIV-CSS学习*****两列布局
html 布局缩放比例,css布局之百分比宽度布局的使用
如何利用百分比布局？本篇文章就给大家介绍css布局之百分比宽度布局的使用。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。百分比是什么？如何设置？百分比是一种相对于包含块的计量单位。百分比宽度的计算： 目标元素宽度/父级元素宽度=百分比宽度它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。大家可以运行后，改变页面大小看看效果！你还可以同时使用 min-width 和 m...
html 图片 并排 总宽度,完美实现两个div并排且宽度为50%
完美实现两个div并排且宽度为50%的css代码，有需要的朋友可参考。在ie8,ff3下都可以，当我用ie6一看就折行了。网上搜了搜，发现在ie6,ie7下如果总宽度为奇数就折行，为偶数正常。打个比方：总宽度为800，那2个div刚好就400，如果总宽度为799，那ie8,ff3下会把分配好，一个400，一个399。而ie6,ie7就都分配成400，加起来800大于799所以会折行。看来直接设wi...
【css基础】实现左边div固定宽度 右边div自适应撑满剩下的宽度
简单来说，实现布局最好的方式是 flex，简单兼容现代浏览器和机型。当然，我是因为还没有学 grid（但 grid 要记得参数比较多）。绝对定位和浮动各有优缺点float 区别于其他三种，不需要父元素做容器grid 区别于其他三种，不需要设置子元素（左元素的）宽绝对定位区别于其他三种，它的方法不仅要父元素有高，其子元素也要有高flex 最简单。
div内li标签间距_html ul li 横排 间距
怎么通过CSS来修改UL里LI之间的行间距呢？怎么通过CSS来修改UL里LI之间的行间距呢？ 。使用css语句：line-height 通过设置不同的line-height值得到不同间距。 代码： 效果： 扩展资料： line-height的可以设置三种方式：像素，百分比，数值。 参考资料：w3schoolline-heighthtml中ul，li有关css设置问题。第一个li与开始光标kanga...
CSS

61,129

社区成员

60,711

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章