div和input在一行
时间: 2024-04-11 22:32:50 浏览: 15
要让 `<div>` 和 `<input>` 元素在同一行显示,你可以使用 CSS 的 `display` 属性和相应的值来完成。下面是一个示例代码,演示了如何让 `<div>` 和 `<input>` 元素在一行显示:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div and Input in One Line</title>
<style>
.container {
display: flex;
}
.container div {
flex: 1;
}
.container input {
flex: 2;
}
</style>
</head>
<body>
<div class="container">
<div>This is a div element.</div>
<input type="text" placeholder="This is an input element">
</div>
</body>
</html>
```
在上面的示例中,我们使用了 CSS 的 `display: flex` 来创建一个弹性容器,并使用 `flex` 属性来控制 `<div>` 和 `<input>` 元素的宽度比例。在这个示例中,`<div>` 元素的宽度为 `<input>` 元素宽度的一半,因为我们将其 `flex` 属性设置为 1,而将 `<input>` 元素的 `flex` 属性设置为 2。
你可以根据需要调整 `.container div` 和 `.container input` 的 `flex` 属性值来改变它们的宽度比例。