如何在同一行对齐两个标题?

Question

我试图对齐两个标题，一个h1和h2元素，在同一行。我使用这段代码在圆圈中创建了一个数字，代表第一个标题和标题&设备名称"这是第二个标头:

.circle {
border-radius: 45%;
width: 30px;
height: 20px;
padding: 0.5px;
background: #E6354A;
border: 3px solid #E6354A;
color: #FDFEFE;
text-align: left;
font-size: 5px;
}

<table cellpadding='0' cellspacing='0' border='0' border-collapse='collapse' style='width:98%; text-align: center; margin: 0 auto;'>
<tr>
<td colspan='4' <div style='clear:both'>
<div class='circle'>
<h1 style='font-weight: bold; text-align: left; font-size: 13px; margin-top: 0;'>" + obj.value[0].DEVICE_OVERALL_SCORE.toFixed(2) + "</h1>
</div>
<h2 style='font-weight: light; text-align: left; font-size: 16px; margin-top: 0;'> Device name: " + grci.name + " </h2>
</div>
<hr />
</td>
</tr>
</table>

由于某些原因，圆圈内的数字出现在一行，设备名称标题出现在其下一行。谁能告诉我如何让它们并排出现?

Answer 1

这是因为div和heading在默认情况下是块元素，这意味着它们占用了所有的空间，并使其他块元素有单独的行。要更改这一点，您需要将它们设置为float，将它们设置为flex,grid或inline-block元素。

我试图将它们设置为inline-block，因为这是最快的，但这实际上取决于需求。

<style>
.circle {border-radius: 45%;width: 30px;height: 20px;padding: 0.5px;background: #E6354A;border: 3px solid #E6354A;color: #FDFEFE;text-align: left;font-size: 5px;}
.circle, h2 {display: inline-block;}
</style>
<table cellpadding='0' cellspacing='0' border='0' border-collapse ='collapse' style='width:98%; text-align: center; margin: 0 auto;'>
<tr>
<td colspan='4'>
<div style= 'clear:both'>
<div class='circle'>
<h1 style='font-weight: bold; text-align: left; font-size: 13px; margin-top: 0;'>" + obj.value[0].DEVICE_OVERALL_SCORE.toFixed(2) + "</h1>
</div>
<h2 style = 'font-weight: light; text-align: left; font-size: 16px; margin-top: 0;'> Device name: " + grci.name + " </h2>
</div>
<hr />
</td>
</tr>
</table>

Answer 2

你不能同时有两个标题并排，因为标题的定义是在表的顶部的一行。因此，请确保使用正确的定义。

Answer 3

在div中换行标题并使其灵活

<style>
div {
display: flex;
}
h1 {
widht: 50%;
}
</style>
<div>
<h1>HEADER1</h1>
<h1>HEADER2</h1>
</div>

Flex方向默认为行，请注意，我应用width: 50%来创建两个偶数列。你可能也想对齐和调整，看看align-items和justify-content的属性。