2012-10-10 36 views
12

Tôi đã phát hiện ra một vấn đề CSS lạ vào sáng nay và tôi hy vọng các chuyên gia CSS có thể giúp tôi. Trong this demo, tại sao văn bản trong div màu đỏ đẩy nó xuống? Tôi mong rằng hai div sẽ ở cạnh nhau. Cảm ơn!
EDIT: Cảm ơn các bạn đã trả lời. Tôi sẽ chấp nhận một câu trả lời trong một chút. Bất cứ ai có thể giải thích lý do tại sao điều này xảy ra?Văn bản trong div chặn nội tuyến đẩy nó xuống

Trả lời

21

...........................

Hi nay sử dụng để vertical-align: top;

div { 
    display: inline-block; 
    height: 50px; 
    width: 50px; 
    vertical-align: top; 
} 

Demo

+0

Bạn có thể giải thích lý do tại sao bạn không sử dụng phao: trái, đây là một giải pháp sạch sẽ + 1 cho việc này. – freebird

+1

Vâng, tôi nghĩ đây là giải pháp tốt nhất. Cảm ơn! :) Bạn có biết tại sao văn bản gây ra vấn đề đó không? – Abraham

+2

bạn có thể sử dụng để hiển thị khối nội tuyến có nghĩa là khối nội tuyến defulat là đường cơ sở hơn xác định để luôn đứng thẳng hàng đầu nếu bạn xác định phần tử khối nội tuyến hiển thị trong bất kỳ phần tử html nào. –

-2

Thêm float:left giải quyết vấn đề.

Working sample

+0

tôi nghĩ nó sẽ là thú vị để biết lý do tại sao nó đang làm việc theo cách này với văn bản. –

+0

@TimotheeTosi Tôi nhận thấy rằng, tôi không biết tại sao, bạn có thể cho tôi biết.Cảm ơn. – freebird

+0

"inline-block yêu cầu các trình duyệt đặt nội tuyến đó vào phần tử, nhưng để xử lý nó như thể nó là một phần tử mức khối." Vì vậy, bạn có thể nổi nó! http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/ – BenRacicot

Các vấn đề liên quan