Hướng dẫn Tìm hiểu và cách dùng display: inline-block

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,650
Được Like
10,909
Tìm hiểu và cách dùng display: inline-block

Thông thường, khi bạn muốn tạo một list đối tượng nằm ngang thì bạn cần phải sử dụng float:left/right. Tuy nhiên, các bạn có thể sử dụng display:inline-block để làm điều đó một cách đơn giản hơn. Trong bài viết này mình sẽ giới thiệu các bạn cách sử dụng và cách fix để sử dụng cho IE7.

Float rất khó chơi
Rắc rối khi chúng ta sử dụng float khá là nhiều, có thể kể đến một số vấn đề như sau:
  • Kết thúc float phải dùng clear, nếu không sẽ bị tràn nội dung.
  • Phải có width chính xác của thành phần cha và con.
Inline vs block
Khái niệm về Inline và Block là một khái niệm hết sức cơ bản nhưng cũng cực kỳ quan trọng trong CSS. Hiểu được từng đặc điểm của mỗi thành phần là chìa khóa quan trọng để bạn có thể vận hành CSS theo ý muốn. Trong bài này mình sẽ nói về chức năng của từng thành phần. Tuy nhiên mình sẽ vẫn giữ nguyên từ chuyên ngành là Block và Inline mà không dịch ra tiếng Việt là “khối” và “trong dòng” nghe cùi quá.
Khi các thành phần HTML được hiển thị trên trình duyệt nó thường có 2 cách hiển thị là theo Block và Inline. Nói hình tượng để bạn dễ hiểu thì các thành phần Block giống như một bàn cờ và các thành phần Inline là quân cờ. Các quân cờ nằm trong bàn cờ và bàn cờ thì không bao giờ nằm trong quân cờ. Đây cũng là một nguyên tắc cơ bản nhất của Inline và Block. Thành phần inline có thể nằm trong thành phần Block, nhưng Block không thể nằm trong thành phần Inline.

Inline+block
Display:inline-block được thừa hưởng 2 yếu tố của inline và block. Do đó, về mặt căn bản thì nó sẽ giúp đối tượng hiển thị theo chiều ngang và có thể ấn định được các thuộc tính width, height, padding.
Để hiểu rõ hơn, bạn có thể xem thêm về ví dụ sau.

Code html & css
Mã:
<style type="text/css">
ul#inlineBlock{
    list-style: none inside;
    margin: 50px 50px;
}
ul#inlineBlock li{
    background-color: #CD2C24;
    -webkit-box-shadow: 2px 2px 0 #00A388;
    box-shadow: 2px 2px 0 #00A388;         
    padding: 5px 10px;
    display: inline-block;
    margin-right: 3px;
    margin-left: 0px;
    font-size: 15px;
    text-transform: uppercase;
    border-radius: 3px;
    position: relative;
}
ul#inlineBlock li a{
    color: white;
    text-decoration: none;
    font-weight: 600;
}
</style>
<ul id="inlineBlock">
    <li><a href="#">Trang chủ</a></li>
    <li><a href="#">Giới thiệu</a></li>
    <li><a href="#">Sản phẩm</a></li>
    <li><a href="#">Dịch vụ</a></li>
    <li><a href="#">Liên hệ</a></li>       
</ul>

Kết quả hiển thị

7805929576_96d367a986_z.jpg

Nếu như chúng ta thả nổi height của li thì thuộc tính vertical-align có thể sử dụng được. Xem ví dụ đưới đây:

Code CSS, bạn thêm vào css selector “ul#inlineBlock li” đoạn thuộc tính sau:
Mã:
vertical-align: middle;

Và sữa thêm một chút tại thẻ li này để chúng ta có được thuộc tính height thả nổi:
Mã:
<li><a href="#">Giới thiệu <br>Giới thiệu <br>Giới thiệu <br>Giới thiệu</a></li>

Kết quả hiển thị

7805929208_56869bb928_z.jpg

Tuy inline-bock rất hữu dụng nhưng lại ko hiển thị tốt trên IE7, và sau đây là cách chữa. Code CSS, bạn thêm vào css selector “ul#inlineBlock li” đoạn thuộc tính sau:
Mã:
/*fix for IE 7*/
zoom:1;
*display: inline;

Chúc các bạn thành công.


Nguồn: izwebz.com​
 

Đính kèm

  • inline-block.rar
    738 bytes · Lượt xem: 1

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom