我试图对齐两个标题,一个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>
由于某些原因,圆圈内的数字出现在一行,设备名称标题出现在其下一行。谁能告诉我如何让它们并排出现?
这是因为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>
你不能同时有两个标题并排,因为标题的定义是在表的顶部的一行。因此,请确保使用正确的定义。
在div中换行标题并使其灵活
<style>
div {
display: flex;
}
h1 {
widht: 50%;
}
</style>
<div>
<h1>HEADER1</h1>
<h1>HEADER2</h1>
</div>
Flex方向默认为行,请注意,我应用width: 50%
来创建两个偶数列。你可能也想对齐和调整,看看align-items
和justify-content
的属性。