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

現(xiàn)在，DIV+CSS技術(shù)已經(jīng)越來越普及，只要在模版中采用DIV+CSS技術(shù)進(jìn)行制作，可以不必對程序進(jìn)行修改，輕松實(shí)現(xiàn)標(biāo)題緊密排布、自動(dòng)雙列多列顯示標(biāo)題。有HTML網(wǎng)頁制作經(jīng)驗(yàn)者可以通過修改模版，嘗試這樣的制作模式。

例一：標(biāo)題緊密排布

新建一個(gè)模版tpl_auotlist.htm，模版內(nèi)容為：

<!-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->

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

例二：標(biāo)題雙列排布

新建一個(gè)模版tpl_doublelist.htm，模版內(nèi)容為：

<!-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->

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

該制作方法同樣適合于文章列表，商貿(mào)系統(tǒng)的企業(yè)列表等所有標(biāo)題列表。