CSS Display屬性

block

  • 預設屬性
  • 一個一個排列下來
  • border:超長條
  • margin::上下左右皆可調整
<ul>
 <li class="block">block</li>
 <li class="block">block</li>
 <li class="block">block</li>
 <li class="block">block</li>
</ul>
.block{
 display: block;
 border: solid 1px black;
 margin-left: 10px;
 margin-right: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
}

Display

  • inline
  • inline
  • inline
  • inline

inline

  • 所有元素排在同一行
  • border:合身包覆内文
  • margin:只能動左右,無法動上下
<ul>
 <li class="inline">inline</li>
 <li class="inline">inline</li>
 <li class="inline">inline</li>
 <li class="inline">inline</li>
</ul>
.inline{
 display: inline;
 border: solid 1px black;
 margin-left: 10px;
 margin-right: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
}

Display

  • inline
  • inline
  • inline
  • inline

inline-block

  • 所有元素排在同一行
  • border:合身包覆内文
  • margin:上下左右皆可調整
<ul>
 <li class="inline-block">inline-block</li>
 <li class="inline-block">inline-block</li>
 <li class="inline-block">inline-block</li>
 <li class="inline-block">inline-block</li>
</ul>
.inline-block{
 display: inline-block;
 border: solid 1px black;
 margin-left: 10px;
 margin-right: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
}

Display

  • inline-block
  • inline-block
  • inline-block
  • inline-block

3 關於 “CSS Display屬性” 的評論

  1. Right here is the right website for anyone who wants to understand this
    topic. You realize so much its almost tough to argue woth you (not that I personally would want
    to…HaHa). You certainly put a fresh spin on a
    sybject which has been discussed for a long time.
    Excellent stuff, just excellent!

發佈回覆給「how to get a girls number」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *