在 HTML 中，可以使用 CSS 的 display 属性将元素转化为行内块级元素。具体来说，可以将元素的 display 属性设置为 inline-block 来将其转化为行内块级元素，从而使其与文本在一行内显示，同时可以设置宽高等样式。
下面是一个示例 HTML 页面，其中演示了如何将一个块级元素转化为行内块级元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Convert Element to Inline-block Example</title>
<style>
.paragraph {
background-color: yellow;
color: red;
padding: 10px;
font-size: 20px;
border: 1px solid black;
}
.inline-block {
display: inline-block;
background-color: blue;
color: white;
padding: 20px;
font-size: 30px;
border: 2px solid red;
}
</style>
</head>
<body>
<h1>Convert Element to Inline-block Example</h1>
<div class="paragraph">This is a div element.</div>
<span class="inline-block">This is a span element converted to inline-block element using display: inline-block;</span>
<script>
// Convert the div element to an inline-block element
document.querySelector(".paragraph").style.display = "inline-block";
</script>
</body>
</html>在上面的示例中，使用 CSS 的 display 属性将一个 span 元素转化为行内块级元素，并设置了一些样式属性。同时，在 JavaScript 中使用 document.querySelector() 方法获取块级元素，然后将其 display 属性设置为 inline-block，从而将其转化为行内块级元素。
正文完