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

<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ị

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:

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:

<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:

/*fix for IE 7*/
zoom:1;
*display: inline;