CSS displays two lines

CSS Display Two Lines

In web design, sometimes we need to display two lines of content and have them display on the same line. This is very common in some navigation bars or titles. In CSS, we can achieve this effect using a few simple techniques.

Using display: inline-block

One common method is to use the display: inline-block property. This property causes elements to appear in a row and allows you to set their width and height.

.container { 
width: 100%; 
} 

.item { 
display: inline-block; 
width: 50%; 
height: 50px; 
background-color: lightblue; 
} 

<div class="container"> 
<div class="item">Item 1</div> 
<div class="item">Item 2</div> 
</div> 

Running result:

Item 1 Item 2

Using flex layout

Another common method is to use flex layout. Flex layout is a powerful CSS layout model that allows us to easily implement various complex layouts.

.container {
display: flex;
}

.item {
flex: 1;
height: 50px;
background-color: lightblue;
}

<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>

</div>

Running Results:

Item 1 Item 2

Using the above two methods, we can easily display two lines of content on the same line on a web page. In actual projects, you can choose the appropriate method based on your specific needs to achieve the desired effect.