質問
湾曲したタブを備えた水平ナビゲーションがあります。画面の解像度が何であれ、水平ナビゲーションを中心にしたいと思います。現在、私の水平NAVは左手縁から260px離れています。したがって、この方法の代わりに、画面の解像度に関係なく、画面の中心にしたいだけです。
base_menu.html
<ul id="toc">
<li><a href="{% url mmc.views.return_clients %}"><span>Home</span></a></li>
<li><a href="{% url mmc.views.quote_step1 %}"><span>Create quote/order</span></a></li>
<li><a href="{% url mmc.views.search_item %}"><span> Item Search</span></a></li>
<li><a><span>Service orders</span></a><br/>
<ul class="subnav">
<li><a href="{% url mmc.views.order_list %}"><span>Storage orders</span></a></li>
<li><a href="{% url mmc.views.order_list_service 1 %}"><span>Delivery orders</span></a></li>
<li><a href="{% url mmc.views.order_list_service 2 %}"><span>Collection orders</span></a></li>
</ul>
</li>
<li><a><span>Collection/Delivery</span></a><br/>
<ul class="subnav">
<li><a href="{% url mmc.views.service_list 1 %}"><span>Delivery list</span></a></li>
<li><a href="{% url mmc.views.service_list 2 %}"><span>Collection list</span></a></li>
</ul>
</li>
<li><a><span>Admin Tools</span></a><br/>
<ul class="subnav">
<li><a href="{% url mmc.views.invoice_list %}"><span>Export for invoicing</span></a></li>
<li><a href="{% url mmc.views.dbbackup %}"><span>Backup data</span></a></li>
</ul>
</li>
<li><a href="{% url mmc.views.help_login %}" target="_blank" onclick="return showAddAnotherPopup(this);"><span>Help</span></a></li>
</ul>
base.css
ul#toc {
height: 2em;
list-style: none;
margin-left: 260px;
padding: 0;
position: relative;
width: 100%;
}
ul#toc li{
background:#ffffff url(../images/tab.png);
float: left;
margin: 0 1px 0 0;
}
ul#toc li#drop{
background-color:#bce6c3;
float: left;
margin: 0 1px 0 0;
}
ul#toc span {
background: url(../images/tab.png) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
ul#toc a {
color: #000000;
height: 2em;
float: left;
text-decoration: none;
padding-left: 10px;
}
ul#toc a:hover {
background: url(../images/tab2.png);
text-decoration: underline;
}
ul#toc a:hover span{
background: url(../images/tab2.png) 100% 0;
}
解決
SOのようなCSSのULのマージンルールを変更してください:
ul#toc{
margin: 0 auto;}
これにより、ブラウザはUL要素の両側のマージンを自動的に等しくします。
また、UL#TOCに固定幅を与える必要があります。これは、画面の幅全体に収まるため、何も中心にできないため、固定幅を提供する必要があります。
所属していません StackOverflow