Computer >> Máy Tính >  >> Lập trình >> CSS

Hiển thị nội tuyến bằng CSS

Không giống như khối, các phần tử nội dòng bắt đầu trong cùng một dòng và chỉ chiếm chiều rộng được phân bổ. Bây giờ chúng ta hãy xem một ví dụ để triển khai giá trị thuộc tính display:inline trong CSS -

Ví dụ

Bây giờ chúng ta hãy xem một ví dụ -

<!DOCTYPE html>
<html>
<head>
<style>
span {
   background-color: orange;
   color: white;
}
p.demo {
   display: none;
}
span.demo1 {
   display: inline;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <p class="demo">9AM</p> 10AM on 20th December.
</div>
<div>
Match will end at <span class="demo1">5PM</span> on 20th December.
</div>
</body>
</html>

Đầu ra

Hiển thị nội tuyến bằng CSS

Ví dụ

Bây giờ chúng ta hãy xem một ví dụ khác -

<!DOCTYPE html>
<html>
<head>
<style>
span#demo {
   background-color:orange;
   color: white;
   display:inline;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <span id="demo">9AM</span> on 20th December.
</div>
</body>
</html>

Đầu ra

Hiển thị nội tuyến bằng CSS