| Ngày gửi: 11/04/2015 lúc 10:24 sáng | Đã khóa IP
|
|
|
#Võ Minh Mẫn
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 tôi sẽ nói về chức năng của từng thành phần. Tuy nhiên tôi
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.
(Trích từ bài viết “Thành phần Block và Inline” của tác giả Demon Warlock)
#inline+block
Display:inline-block được thừ hưởng 2 yếu tố của inline và block. Đo
đó, 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <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; &nbs p;
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ị
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:
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:
1 | <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ị
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:
1 2 3 | /*fix for IE 7*/
zoom:1;
*display: inline;
|
__________________
YM: DUCVINH83
0912 822334
|
9ecva.com - 9e Chu Van An Forever : Templates
Chủ đề: CSS display: inline-block
