用HTML的原生语法实现两个div子元素在同一行中排列
要在HTML中使两个div
元素在同一行中排列,可以使用CSS的display: inline
或display: inline-block
属性。以下是一个简单的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Inline Example</title>
<style>
.inline-div {
display: inline;
margin-right: 10px; /* Optional space between divs */
}
</style>
</head>
<body>
<div class="inline-div">
<p>Div 1</p>
</div>
<div class="inline-div">
<p>Div 2</p>
</div>
</body>
</html>
在这个例子中,两个div
都应用了inline-div
类,这个类通过设置display: inline
属性使得div
元素水平排列。如果需要在div
之间添加空白,可以使用margin-right
属性。
评论已关闭