:::
所有書籍
「DREAMWEAVER」目錄
MarkDown
常用的語法
色碼表
網頁時間跳轉語法
搜尋優化
網址列小圖示
時間到自動換圖語法
常用的語法
利用 css 讓 ul div 置中
ul 置中方法（用於使用 li 設計的選單）
CSS的垂直置中,左右置中
浮動式固定上選單
製作浮動式的回到網頁頂部按鈕
將footer 浮動固定在網頁下方
讓 float 的 div 高度相同
左欄固定，右欄佔滿剩餘空間
ul 置中方法（用於使用 li 設計的選單）
DREAMWEAVER =========== 提供兩種不同的結構，跟大家分享如何讓`ul`置中 ul 外還有父層 div ------------ 假設你的結構為「ul 還有父層」，亦即： <div class="prism-show-language"><div class="prism-show-language-label" data-language="Markup">Markup</div> </div> ``` <pre class="language-markup" data-language="Markup"> ```markup <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/div" target="_blank">div</a></span> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/class" target="_blank">class</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ul" target="_blank">ul</a></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/li" target="_blank">li</a></span><span class="token punctuation">></span></span>Hello<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/li" target="_blank">li</a></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/li" target="_blank">li</a></span><span class="token punctuation">></span></span>World<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/li" target="_blank">li</a></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ul" target="_blank">ul</a></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/div" target="_blank">div</a></span><span class="token punctuation">></span></span> ``` ``` 那我們可以在父層設定`text-align`，並修改`ul`的 display 狀態為 inline-block： <div class="prism-show-language"><div class="prism-show-language-label" data-language="CSS">CSS</div> </div> ``` <pre class="language-css" data-language="CSS"> ```css <span class="token selector">.wrap</span> <span class="token punctuation">{</span> <a class="token property" href="http://docs.webplatform.org/wiki/css/properties/text-align" target="_blank">text-align</a><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.wrap ul</span> <span class="token punctuation">{</span> <a class="token property" href="http://docs.webplatform.org/wiki/css/properties/display" target="_blank">display</a><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token punctuation">}</span> ``` ``` ul 沒有父層 ------- 如果你的 HTML 結構中，`ul`沒有父層包覆，例如： <div class="prism-show-language"><div class="prism-show-language-label" data-language="Markup">Markup</div> </div> ``` <pre class="language-markup" data-language="Markup"> ```markup <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ul" target="_blank">ul</a></span> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/class" target="_blank">class</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/li" target="_blank">li</a></span><span class="token punctuation">></span></span>Hello<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/li" target="_blank">li</a></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/li" target="_blank">li</a></span><span class="token punctuation">></span></span>World<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/li" target="_blank">li</a></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ul" target="_blank">ul</a></span><span class="token punctuation">></span></span> ``` ``` 那我們可以利用`margin: 0 auto`以及`display:table`調整`ul`： <div class="prism-show-language"><div class="prism-show-language-label" data-language="CSS">CSS</div> </div> ``` <pre class="language-css" data-language="CSS"> ```css <span class="token selector">ul.wrap</span> <span class="token punctuation">{</span> <a class="token property" href="http://docs.webplatform.org/wiki/css/properties/display" target="_blank">display</a><span class="token punctuation">:</span> table<span class="token punctuation">;</span> <a class="token property" href="http://docs.webplatform.org/wiki/css/properties/margin" target="_blank">margin</a><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> ``` ```
:::
主選單
首頁
本站消息
教學圖片
教學文章
會員登入
帳號
密碼
記住我
登入
常用的語法
