CSS on the same line
CSS Same Row
In web development, we often need to display multiple elements on the same row. This can better utilize page space and improve page aesthetics and readability. In CSS, we can use a few techniques to achieve the effect of placing elements on the same line. This article will introduce some common methods and sample code to help you better understand how to achieve this effect on web pages.
1. Using the float property
Using the float property allows elements to be displayed on the same line. By setting different float values, you can control the element’s position. Here’s a simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float example</title>
<style>
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<div class="left">Left element</div>
<div class="right">Right element</div>
</body>
</html>
Output:
In the example above, we define two div elements and set float: left and float: right, respectively, so that the two elements are displayed on the same line, one on the left and one on the right.
2. Use display: inline-block
Another common method is to use the display: inline-block property, which allows elements to be displayed in the same line as block-level elements. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline-block Example</title>
<style>
.inline-block {
display: inline-block;
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>
</body>
</html>
Output:
In the example above, we define three div elements and set display: inline-block so that these three elements are displayed on the same line.
3. Use flex layout
flex layout is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex Layout Example</title>
<style>
.flex-container {
display: flex;
}
.flex-item {
flex: 1;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</body>
</html>
Output:
In the example above, we define a flex container with three child elements. By setting display: flex and flex: 1, these three child elements will be displayed in the same line.
4. Using Inline Elements
In addition to the methods described above, you can also use inline elements directly to achieve the effect of displaying elements in the same line. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline Element Example</title>
<style>
.inline {
display: inline;
padding: 10px;
background-color: #0f0;
}
</style>
</head>
<body>
<span class="inline">First element</span>
<span class="inline">Second element</span>
<span class="inline">Third element</span>
</body>
</html>
Output:
In the example above, we used three span elements and set display: inline to display them in the same row.
5. Using a Table Layout
The final method is to use a table layout. By setting the display properties of an element to table, table-row, and table-cell, you can achieve the effect of displaying elements in the same row. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table layout example</title>
<style>
.table {
display: table;
width: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
width: 33.33%;
height: 100px;
background-color: #ff0;
}
</style>
</head>
<body>
<div class="table">
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</body>
</html>
Output:
In the example above, we use the table, table-row, and table-cell elements. By setting their display properties, we can achieve the effect of displaying elements on the same row.
Through the above introduction, we can see that there are multiple ways to display elements on the same line in CSS. You can choose the appropriate method based on your specific needs.