以前網頁制作者在制作標題列表時，通常使用table的tr進行換行、使用td進行換列。這種方式在可預見標題長度并規劃好網頁布局的情況下，確實可以使網頁布局美觀。但是，由于不可預知管理員輸入標題的長度，這種方式要么產生一大堆空白，要么產生很難看的換行，即便后臺可以設置每行每列顯示條數和截取文字，仍不能達到完美效果。

現在，DIV+CSS技術已經越來越普及，只要在模版中采用DIV+CSS技術進行制作，可以不必對程序進行修改，輕松實現標題緊密排布、自動雙列多列顯示標題。有HTML網頁制作經驗者可以通過修改模版，嘗試這樣的制作模式。

例一：標題緊密排布

新建一個模版tpl_auotlist.htm，模版內容為：

<!-start->
<ul style="margin: 0; padding: 0;">
<!-start->
<!-list->
<li style="margin: 0;padding:1px 5px 1px 3px; border: 0;float:left; color:#1f3a87; list-style-type:none; line-height:150%; text-align:left;">
<div style="white-space: nowrap"><a href="{ #link# }"  target="{ #target# }" { #bold# } { #red# } style="color:#333333;font-size:12px">{ #title# }</a></div>
</li>
<!-list->

<!-end->
</ul>
<!-end->

通過后臺頁面設置，選擇一個文章列表插件，設置其采用tpl_autolist.htm ，可以看到緊密排列的效果。如下圖

例二：標題雙列排布

新建一個模版tpl_doublelist.htm，模版內容為：

<!-start->
<ul style="margin: 0; padding: 0;">
<!-start->
<!-list->
<li style="width=50%;margin: 0;padding:1px 5px 1px 3px; border: 0;float:left; color:#1f3a87; list-style-type:none; line-height:150%; text-align:left;">
<div style="white-space: nowrap"><a href="{ #link# }"  target="{ #target# }" { #bold# } { #red# } style="color:#333333;font-size:12px">{ #title# }</a></div>
</li>
<!-list->

<!-end->
</ul>
<!-end->

通過后臺頁面設置，選擇一個文章列表插件，設置其采用tpl_doublelist.htm ，可以看到雙列排列的效果。如下圖:

該制作方法同樣適合于文章列表，商貿系統的企業列表等所有標題列表。