技術問答
技術文章
iT 徵才
Tag
聊天室
2023 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2018 iT 邦幫忙鐵人賽
DAY
3
1
自我挑戰組
網頁學習日誌
系列 第
3
篇
CSS : display屬性-區塊和行內元素差異
2018鐵人賽
yuski
2017-12-06 14:21:14
7807 瀏覽
分享至
diplay區塊和行內屬性表格分析:
block(區塊元素)
inline(行內元素)
inline-block
差異
將整行容器空間占滿,所以會分行排列
與文字段落同行排列
效果同於float,同時具有block(區塊)和inline(行內)屬性
影響範圍
整行都可以點到
元素範圍以外點不到
元素範圍以外點不到
使用地方
使用手機點選按鈕、選單等需大範圍感應區域的元素
a連結
元素並排
block: 區塊將整行空間占滿,後面元素往下行排
inline:同行排列
display屬性 最常用在 ul li 清單項目,ul li預設都為block所以都會分行排列
所以如果要讓li並排,只要設定li為display:inline 或是 inline-block,ul 和 li都可在同行顯示,但是ul仍然還是區塊元素(block)。
留言
追蹤
檢舉
上一篇
CSS : position 絕對定位與相對定位
下一篇
CSS : 網頁排版要注意的Box Model(盒模型)
系列文
網頁學習日誌
共
30
篇
目錄
RSS系列文
訂閱系列文
68
人訂閱
26
API : Google Maps API 設定(2)地圖標記
27
API : Google Maps API 設定(3)新增多個標記
28
API : Google Maps API 設定(4) js+json 標記 wifi 熱點
29
Flex:春聯
30
Flex : Bootstrap 4 Flex 網格
完整目錄
直播研討會
{{ item.subject }}
{{ item.channelVendor }}
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
1123
組
團體組數
52
組
累計文章數
23096
篇
完賽人數
656
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
2018鐵人賽
javascript
2017鐵人賽
python
windows
php
c#
windows server
linux
css
程式設計
react
vue.js
熱門問題
公司有人常常亂改IP位置(想問有甚麼辦法可以將IP鎖住不給更改)
DDR3記憶體 只抓到一半
請問我晚上開發一款工具,早上給公司使用,沒特別條款,法律知識產權還是我的嗎?
和朋友討論不出來 ,關鍵字搜尋方法,我也想學EXCEL了
請教外網如何連到家裡內部裝置
自家官網連線不到 (已解決)
請問公司網路通暢,卻部分固定的使用者無法連到特定網頁 ,求救~~~
API網址列 網址問題
Alma Linux與Rocky Linux,選擇哪一個比較好?
請教各位前輩關於 IT 管理者為 User 重設 AD 帳號的密碼的行政流程
熱門回答
公司有人常常亂改IP位置(想問有甚麼辦法可以將IP鎖住不給更改)
和朋友討論不出來 ,關鍵字搜尋方法,我也想學EXCEL了
DDR3記憶體 只抓到一半
Alma Linux與Rocky Linux,選擇哪一個比較好?
自家官網連線不到 (已解決)
熱門文章
筆電Wifi不見後, 筆電該怎麼上網?
在任何雲端上運行:雲端的可移植性你有考慮過嗎?
量子計算「基礎」3. 量子操作
[C#] Remove Element 解法
FileZilla Server
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}