Для того чтобы поставить элементы в одну строку и выровнять их, можно использовать различные методы и свойства CSS в HTML.
Один из способов это сделать - использовать свойство CSS display: flex; для контейнера, содержащего элементы, которые нужно выровнять. Это свойство позволяет превратить контейнер в Flex-контейнер, который позволяет управлять расположением элементов внутри него.
Пример HTML и CSS кода:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
justify-content: space-between; /* задает выравнивание по горизонтали */
align-items: center; /* задает выравнивание по вертикали */
}
.item {
width: 100px;
height: 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
В этом примере у нас есть контейнер с классом .container и тремя элементами внутри него с классом .item. CSS свойство display: flex; применяется к контейнеру, а свойства justify-content: space-between; и align-items: center; используются для того, чтобы элементы распределились вдоль оси X и Y соответственно.
Таким образом, используя Flexbox и подобные CSS-свойства, можно легко выравнивать элементы на веб-странице и управлять их расположением.