|
|
本館粉絲專頁 |
|
|
使用者:Digipunk/IB：修訂版本之間的差異
台灣棒球維基館
小 |
小 |
||
| 第1行： | 第1行： | ||
<INCLUDEONLY><DIV STYLE="display:inline-block;text-indent:0;padding:0;{{#ifeq:{{{EXT}}}|1|width:100%;height:100%}};{{#ifeq:{{{MODE|}}}||{{{2|}}}}};{{{st|}}}">{{#switch:{{{MODE|}}} | <INCLUDEONLY><DIV STYLE="display:inline-block;text-indent:0;padding:0;{{#ifeq:{{{EXT}}}|1|width:100%;height:100%}};{{#ifeq:{{{MODE|}}}||{{{2|}}}}};{{{st|}}}">{{#switch:{{{MODE|}}} | ||
| #default = {{{1|}}} | | #default = {{{1|}}} | ||
| − | | ROSTER = <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" STYLE="width:100%;height:100% | + | | ROSTER = <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" STYLE="width:100%;height:100%;white-space:nowrap;{{{st1|}}}"> |
<TR> | <TR> | ||
<TD STYLE="height:1%;width:16px"></TD> | <TD STYLE="height:1%;width:16px"></TD> | ||
| 第13行： | 第13行： | ||
<TR> | <TR> | ||
<TD COLSPAN="3" STYLE="padding:2px 4px 4px;border:{{{border|{{#switch:{{{TEAM|}}}|ROC|TWN|TW=3px solid #08C|2px solid deeppink}}}}};border-top:0;border-radius:0 0 8px 8px;height:100%;vertical-align:top;{{#ifeq:{{{EN}}}|1|white-space:normal}};{{{st3|}}}"> | <TD COLSPAN="3" STYLE="padding:2px 4px 4px;border:{{{border|{{#switch:{{{TEAM|}}}|ROC|TWN|TW=3px solid #08C|2px solid deeppink}}}}};border-top:0;border-radius:0 0 8px 8px;height:100%;vertical-align:top;{{#ifeq:{{{EN}}}|1|white-space:normal}};{{{st3|}}}"> | ||
| − | <UL STYLE="list-style-position:inside;margin-left:5.4em;text-indent:- | + | <UL STYLE="list-style-position:inside;margin-left:5.4em;text-indent:-5em;font-size:8pt;line-height:150%;{{#ifeq:{{{EN}}}|1|font-family:'Comic Sans MS';font-size:8pt}};{{{st4|}}}"> |
| − | {{#if:{{{1|}}}|<LI>{{{1}}}</LI>}}{{#if:{{{2|}}}|<LI>{{{2}}}</LI>}}{{#if:{{{3|}}}|<LI>{{{3}}}</LI>}}{{#if:{{{4|}}}|<LI>{{{4}}}</LI>}}{{#if:{{{5|}}}|<LI>{{{5}}}</LI>}}{{#if:{{{6|}}}|<LI>{{{6}}}</LI>}}{{#if:{{{7|}}}|<LI>{{{7}}}</LI>}}{{#if:{{{8|}}}|<LI>{{{8}}}</LI>}}{{#if:{{{9|}}}|<LI>{{{9}}}</LI>}}{{#if:{{{10|}}}|<LI>{{{10}}}</LI>}}{{#if:{{{11|}}}|<LI>{{{11}}}</LI>}}{{#if:{{{12|}}}|<LI>{{{12}}}</LI>}}{{#if:{{{13|}}}|<LI>{{{13}}}</LI>}}{{#if:{{{14|}}}|<LI>{{{14}}}</LI>}}{{#if:{{{15|}}}|<LI>{{{15}}}</LI>}}{{#if:{{{16|}}}|<LI>{{{16}}}</LI>}}{{#if:{{{17|}}}|<LI>{{{17}}}</LI>}}{{#if:{{{18|}}}|<LI>{{{18}}}</LI>}}{{#if:{{{19|}}}|<LI>{{{19}}}</LI>}}{{#if:{{{20|}}}|<LI>{{{20}}}</LI>}} | + | {{#if:{{{1|}}}|<LI STYLE="{{{st5|}}}">{{{1}}}</LI>}}{{#if:{{{2|}}}|<LI STYLE="{{{st5|}}}">{{{2}}}</LI>}}{{#if:{{{3|}}}|<LI STYLE="{{{st5|}}}">{{{3}}}</LI>}}{{#if:{{{4|}}}|<LI STYLE="{{{st5|}}}">{{{4}}}</LI>}}{{#if:{{{5|}}}|<LI STYLE="{{{st5|}}}">{{{5}}}</LI>}}{{#if:{{{6|}}}|<LI STYLE="{{{st5|}}}">{{{6}}}</LI>}}{{#if:{{{7|}}}|<LI STYLE="{{{st5|}}}">{{{7}}}</LI>}}{{#if:{{{8|}}}|<LI STYLE="{{{st5|}}}">{{{8}}}</LI>}}{{#if:{{{9|}}}|<LI STYLE="{{{st5|}}}">{{{9}}}</LI>}}{{#if:{{{10|}}}|<LI STYLE="{{{st5|}}}">{{{10}}}</LI>}}{{#if:{{{11|}}}|<LI STYLE="{{{st5|}}}">{{{11}}}</LI>}}{{#if:{{{12|}}}|<LI STYLE="{{{st5|}}}">{{{12}}}</LI>}}{{#if:{{{13|}}}|<LI STYLE="{{{st5|}}}">{{{13}}}</LI>}}{{#if:{{{14|}}}|<LI STYLE="{{{st5|}}}">{{{14}}}</LI>}}{{#if:{{{15|}}}|<LI STYLE="{{{st5|}}}">{{{15}}}</LI>}}{{#if:{{{16|}}}|<LI STYLE="{{{st5|}}}">{{{16}}}</LI>}}{{#if:{{{17|}}}|<LI STYLE="{{{st5|}}}">{{{17}}}</LI>}}{{#if:{{{18|}}}|<LI STYLE="{{{st5|}}}">{{{18}}}</LI>}}{{#if:{{{19|}}}|<LI STYLE="{{{st5|}}}">{{{19}}}</LI>}}{{#if:{{{20|}}}|<LI STYLE="{{{st5|}}}">{{{20}}}</LI>}} |
</UL> | </UL> | ||
</TD> | </TD> | ||
2016年12月6日 (二) 09:09的修訂版本
目次 |
Inline Block
語法及參數順序
{{IB|文字或任何東西|其它樣式}}
參數順序 意義 預設值 1 欲放進此區塊的任何東西 無 2 其它 style 無 st 其它 style 無
說明
- display:inlink-block 顧名思義是將區塊內的文字或任何東西以 inline 形式呈現，換句話說，它可以搭配周圍的文字而顯示在一起，且此屬性可設定寬高，使用彈性很高。
- ※註：各瀏覽器皆支援此屬性。
基本應用
範例一
- inline-block 的應用時機很多，底下只是其中一個例子，並非全部。
- 某些時候，我們需要列出許多西方人名，例如在一個 TABLE 裡列出三個名字，但當容器寬度有限時，人名可能從中間被截斷，這在英文頁面是相當普通且正常的事。
{| CELLSPACING="0" CELLPADDING="3" STYLE="width:350px;font:normal 9pt Consolas;border:1px solid black"
|-
| FirstName LastName, FirstName LastName, FirstName LastName
|}
- 顯示結果如下，第三個人名從中間換行：
FirstName LastName, FirstName LastName, FirstName LastName
- 然而，有些編輯者會希望在換行前後的人名是完整的、不要從中間切開。
- 這種情況下可利用 {{IB}} 將完整人名括起來，表示它是一個區塊，避免從中間切開。
{| CELLSPACING="0" CELLPADDING="3" STYLE="width:350px;font:normal 9pt Consolas;border:1px solid black"
|-
| {{IB|FirstName LastName}}, {{IB|FirstName LastName}}, {{IB|FirstName LastName}}
|}
- 顯示結果如下，第三個人名是一個 inline-block，所以連名帶姓一起換行：
- FirstName LastName,FirstName LastName,FirstName LastName
範例二
- 這是比較花俏的例子。
- 例如我想在一個黑色背景的區域使用一張圖，但圖片本身並非具備透明背景色的 GIF 或 PNG，覺得不太好看。
{| STYLE="width:350px;padding:20px;background:black"
|-
| [[Image:Lamigomonkey.jpg|80px]]
|}
- 顯示結果如下：
- 這時候可以耍點花招，用一個 inline-block 將圖片框起來，然後將此區塊的邊框設成圓形、超出的部份剔除：
{| STYLE="width:350px;padding:20px;background:black"
|-
| {{IB|[[Image:Lamigomonkey.jpg|70px]]|width:80px;height:80px;background:white;padding:3px;
box-sizing:border-box;border:2px solid green;border-radius:99px;overflow:hidden}}
|}
- 顯示結果如下：
球員列表
開發記錄
- [2015-10-23] 建立模板。
- [2016-08-23] 支援參賽球員列表。
