div で margin: 0 auto を設定すると、ポップアップ ボックスの位置がずれます。解決してください。 _html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 09:32:33
オリジナル
1295 人が閲覧しました




<div id="sub-header">	<div class="layout">		<a id="sub-logo" href="{$_G[siteurl]}"><img src="/style/images/small_logo.jpg" title="$_G['setting']['bbname']" alt="$_G['setting']['bbname']" /></a>		<div id="sub-menu">			<dl class="menu-nav">                <dt><a href="{$_G[siteurl]}" onMouseOver="showMenu({'ctrlid':'twt','duration':'2'});">123</a></dt>				<dd id="twt_menu" class="nav-floor" style="display:none;">					<ol>					<!--{eval $i = 1;}-->					<!--{loop $catlist $cat}-->					    <!--{eval $forumurl = !empty($forum['domain']) && !empty($_G['setting']['domain']['root']['forum']) ? 'http://'.$forum['domain'].'.'.$_G['setting']['domain']['root']['forum'] : 'forum.php?mod=forumdisplay&fid='.$cat[fid];}-->					<li><a href="$forumurl" title="$cat[name]"><!--{if $i <= '9'}-->$number{$i}<!--{else}-->{$i}<!--{/if}-->#$cat[name]</a></li>					<!--{eval $i ++;}-->					<!--{/loop}-->					</ol>				</dd>            </dl>		</div><!--{if $_G['setting']['search']}-->	<!--{eval $slist = array();}-->	<!--{if $_G['fid'] && $_G['forum']['status'] != 3 && $mod != 'group'}--><!--{block slist[forumfid]}--><li><a href="javascript:;" rel="curforum" class="curtype">{lang search_this_forum}</a></li><!--{/block}--><!--{/if}-->	<!--{if $_G['setting']['portalstatus'] && $_G['setting']['search']['portal']['status'] && ($_G['group']['allowsearch'] & 1 || $_G['adminid'] == 1)}--><!--{block slist[portal]}--><li><a href="javascript:;" rel="article"{if CURSCRIPT == 'portal'} class="curtype"{/if}>{lang article}</a></li><!--{/block}--><!--{/if}-->	<!--{if $_G['setting']['search']['forum']['status'] && ($_G['group']['allowsearch'] & 2 || $_G['adminid'] == 1)}--><!--{block slist[forum]}--><li><a href="javascript:;" rel="forum"{if (CURSCRIPT == 'forum' && !$_G['fid']) || (CURSCRIPT == 'home' && in_array($do, array('thread', 'activity', 'poll', 'reward', 'debate', 'trade')))} class="curtype"{/if}>{lang thread}</a></li><!--{/block}--><!--{/if}-->	<!--{if $_G['setting']['homestatus'] && $_G['setting']['search']['blog']['status'] && ($_G['group']['allowsearch'] & 4 || $_G['adminid'] == 1)}--><!--{block slist[blog]}--><li><a href="javascript:;" rel="blog"{if CURSCRIPT == 'home' && $do == 'blog'} class="curtype"{/if}>{lang blog}</a></li><!--{/block}--><!--{/if}-->	<!--{if $_G['setting']['homestatus'] && $_G['setting']['search']['album']['status'] && ($_G['group']['allowsearch'] & 8 || $_G['adminid'] == 1)}--><!--{block slist[album]}--><li><a href="javascript:;" rel="album"{if CURSCRIPT == 'home' && $do == 'album'} class="curtype"{/if}>{lang album}</a></li><!--{/block}--><!--{/if}-->	<!--{if $_G['setting']['groupstatus'] && $_G['setting']['search']['group']['status'] && ($_G['group']['allowsearch'] & 16 || $_G['adminid'] == 1)}--><!--{block slist[group]}--><li><a href="javascript:;" rel="group"{if CURSCRIPT == 'group' || $_G['basescript']=='group'} class="curtype"{/if}>$_G['setting']['navs'][3]['navname']</a></li><!--{/block}--><!--{/if}-->	<!--{block slist[user]}--><li><a href="javascript:;" rel="user"{if (CURSCRIPT == 'home' && !in_array($do, array('blog', 'album', 'thread', 'activity', 'poll', 'reward', 'debate', 'trade'))) || $mod == 'ranklist'} class="curtype"{/if}>{lang users}</a></li><!--{/block}--><!--{/if}-->            <!--{if $_G['setting']['search'] && $slist}-->            <div id="sub-search">                <form id="scbar_form" method="{if $_G[fid] && !empty($searchparams[0])}get{else}post{/if}" autocomplete="off" onsubmit="searchFocus($('scbar_txt'))" action="{if $_G[fid] && !empty($searchparams[0])}$searchparams[0]{else}search.php?searchsubmit=yes{/if}" target="_blank">                    <input type="hidden" name="mod" id="scbar_mod" value="search" />                    <input type="hidden" name="formhash" value="{FORMHASH}" />                    <input type="hidden" name="srchtype" value="title" />                    <input type="hidden" name="srhfid" value="$_G[fid]" id="dzsearchforumid" />                    <input type="hidden" name="srhlocality" value="$_G['basescript']::{CURMODULE}" />                    <!--{if !empty($searchparams[1])}-->                        <!--{loop $searchparams[1] $key $value}-->                        <!--{eval $srchotquery .= '&' . $key . '=' . $value;}-->                        <input type="hidden" name="$key" value="$value" />                        <!--{/loop}-->                        <input type="hidden" name="source" value="discuz" />                        <input type="hidden" name="fId" value=""  id="cloudsearchforumId" />                        <input type="hidden" name="q" id="cloudsearchquery" value="" />                    <!--{/if}-->                    <input type="text" name="srchtxt" id="scbar_txt" autocomplete="off" class="sub-search-key" placeholder="搜你想要的...">                        <dl class="sub-serach-switch">                            <dt id="scbar_type" onclick="showMenu(this.id)" hidefocus="true">{lang search}</dt>                        </dl>                    <input type="submit" name="searchsubmit" id="scbar_btn" class="sub-search-btn" value="true">                </form>            </div>            <!--{/if}-->            <ul id="scbar_type_menu" class="p_pop" style="display: none; margin-top:0;"><!--{echo implode('', $slist);}--></ul>			<script type="text/javascript">                initSearchmenu('scbar', '$searchparams[0]');            </script>	</div></div>
ログイン後にコピー


.layout {margin:0 auto;width:960px;}
ログイン後にコピー


レイアウトの自動中央マージンを 0 auto に設定した後、
検索選択ボックスがポップアップして位置がずれる 解決する


ディスカッションに返信 (解決策)

レイアウトはポップアップ ボックスです。ポップアップ ボックスの外側に div のレイヤーを追加しましょう。ポップアップ ボックスはこのスタイルを継承します。ポップアップ ボックスのスタイルを設定してみてください。レイアウトはポップアップ ボックスの外側の div レイヤーである必要があります。ポップアップ ボックスはこのスタイルを継承します

オフセットすることはできません。
レイアウトでは要素を中央に配置する必要がありますよね?

外側のレイアウトにセンタリングを追加しないでください。 。 。もちろん、外側のレイヤーにセンタリングを加えるとズレが生じますよ~・


レイアウト内の要素はセンタリングするべきですよね?

外側のレイアウトにセンタリングを追加しないでください。 。 。もちろん、外側のレイヤーを中央揃えにするとずれてしまいますよ~・


レイアウトを中央揃えにする方法を教えてください

サブヘッダー 外側のレイヤーに相対的な位置合わせを与えることができます

次に、絶対配置を使用して内側のレイヤーを配置しますレイアウト


この方法では影響を受けません~・

サブヘッダー 外側のレイヤーに相対的な配置を与えることができます

そして、内側のレイアウトに絶対位置を使用することができます


この方法では影響を受けません~・
いいえ、解決できません

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート