首頁 網頁設計 讓網頁自動換行的block與inline的應用

讓網頁自動換行的block與inline的應用

weijun
0 評論

在撰寫網頁的時候,大家都知道要透過<br/>來讓文字換行,,不然文字就會全部擠在同一行。不過可能也會發現,如果網頁設定的是<section>,那麼即使沒有換行符也會自動換行。其實這就是block和inline的差異,以下就來看看這兩種差在哪裡吧。

首先我們開啟一個HTML檔案試試看吧,這裡不從頭開始寫,而是先從http://example.com/複製網頁原始碼試試看。

example.com 的網頁原始碼
example.com 的網頁原始碼

複製這個原始碼到新的檔案,另存為html檔,用瀏覽器開啟就會看到一樣的網頁囉。

在這裡我們先添加幾個超連結進去看看。

加入三個超連結到底部

這裡先不指定連結位置,先看看效果就好。這時候整理一下網頁,果然出現了三個超連結在底部。

加入了三個超連結之後。
加入了三個超連結之後。

首先在這裡就可以看出差異了,網頁中間的部分在HTML裡面是包在<div>裡面的,而超連結和<div>之間並沒有換行符,不過卻會自動換行;然而三個超連結之間並不會自動換行。

這是因為一個是區塊block,一個是inline。像是<div></div>這樣包裹一整段內容的CSS設定稱為block,這就像是拼圖一樣,透過設定block產生了一整個獨立的區域出來,而每一個區塊之間都會自動保持距離。

而超連結則是直接將CSS代碼輸入在HTML裡面,這種方式稱作inline,inline之間並不會自動換行。

不過如果將inline的東西放入block裡面,那麼就會產生一樣的效果。這裡就試試看用<li>將每一個超連結都包起來吧。

透過<li>將超連結包裹起來
分別使用<li>包裹起來。
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>

在看看效果,果然可以發現三個超連結自動換行了,這就是block的應用。

透過三個<li>讓超連結變成block之後,果然就自動換行了。
透過三個<li>讓超連結變成block之後,果然就自動換行了。

那麼有沒有將block轉換成inline的方式呢?有的,可以透過CSS選取器,讓block的內容強迫用inline的方式呈現。嘗試在head的部分加入display:inline;試試看。

嘗試用inline的方式顯示
    li {
      display: inline;
    }

果然,超連結又變成並排顯示的樣子了。

以上就是今天的內容,關於block和inline的應用和轉換方式就是這樣。

Related Posts

發表評論

本網站使用cookie來改善您的體驗。 我們假設您對此表示同意,但您可以選擇退出。 接受 閱讀更多