CSS中五種方法實現導覽功能表水平置中的執行個體詳解

在網頁設計中，水平導覽功能表使用是十分廣泛的，在CSS樣式中，我們一般會用Float元素或是「display:inline-block」來解決。而今天主要講解如何讓未知寬度的元素置中，下面我們會列出幾種方法來解決水平置中問題。當然這些方法不一定是用來解決導覽功能表問題，還有其它類似情況也是可以使用的。

CSS導覽功能表水平置中的多種方法：

• 方法1：display:inline-block

• 方法2：position:relative

• 方法3：display:table

• 方法4：display:inline-flex

• 方法5：width:fit-content / width:intrinsic

方法1：display:inline-block

這個方法比較簡單，是將容器轉成「display:inline-block」行內區塊層級元素，然後就可以直接用「text-align:center」使其達到水平置中效果。

HTML代碼：

這裡我們需要一個p來包圍這個導覽功能表。

<p class="navbar">    <ul>        <li><a href="/">首頁</a></li>        …    </ul></p>

CSS代碼：

給外面的p添加「text-align:center」，然後將菜單容器設成「display:inline-block」行內區塊層級元素，菜單浮左「float:left」

.navbar {    text-align:center;}.navbar ul {    display:inline-block;}.navbar li {    float:left;}.navbar li + li {    margin-left:20px;}

這裡瀏覽器安全色只能是IE8或更高版本，所以如果要相容IE7的話，請加入以下代碼

.navbar ul {    display:inline;    zoom:1;}

方法2：position:relative

這是使用「position:relative」定位方法來讓元素水平置中，我不是很推薦這方法，因為代碼多了個p去包住，當然這些是根據情況來使用的。

HTML代碼：

<p class="navbar">    <p>        <ul>            <li><a href="/">首頁</a></li>            …        </ul>    </p></p>

CSS代碼：
將定位p設為浮動，再定位「left:50%」,然後導航定位至「left:-50%」，這方法很有意思吧。可能表達不是很清楚，自己看代碼吧^^

.navbar {    overflow:hidden;}.navbar > p {    position:relative;    left:50%;    float:left;}.navbar ul {    position:relative;    left:-50%;    float:left;}.navbar li {    float:left;}.navbar li + li {    margin-left:20px;}

如果要相容IE7，請添加以下樣式：

.navbar {    position:relative;}

方法3：display:table

如果你喜歡簡潔的代碼，哪麼這個方法就非常適合你了。

HTML代碼：

<ul class="navbar">    <li><a href="/">Home</a></li>    …</ul>

CSS代碼：

.navbar {    display:table;    margin:0 auto;}.navbar li {    display:table-cell;}.navbar li + li {    padding-left:20px;}

瀏覽器安全色：這方法代碼精簡，但不支援IE7及以下版本……

方法4：display:inline-flex

有關flex layout的知識自己查下吧>_<

HTML代碼：

<p class="navbar">    <ul>        <li><a href="/">Home</a></li>        …    </ul></p>

CSS代碼：

.navbar {    text-align:center;}.navbar > ul {    display:-webkit-inline-box;    display:-moz-inline-box;    display:-ms-inline-flexbox;    display:-webkit-inline-flex;    display:inline-flex;}.navbar li + li {    margin-left:20px;}

瀏覽器安全色：不支援IE7及以下版本的IE瀏覽器。

方法5：width:fit-content

HTML代碼：

<p class="navbar">    <ul>        <li><a href="/">首頁</a></li>        …    </ul></p>

CSS代碼：

.navbar {    text-align:center;}.navbar > ul {    display:-webkit-inline-box;    display:-moz-inline-box;    display:-ms-inline-flexbox;    display:-webkit-inline-flex;    display:inline-flex;}.navbar li + li {    margin-left:20px;}

瀏覽器安全色：這個相容比較低，只支援Firefox或chrome、Opera 12這些較新的瀏覽器。

寫在最後：方法1：display:inline-block 簡單易懂。