我試圖在同一行中對齊兩個標題，一個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>出于某種原因，帶有數字的圓圈出現在一行中，而設備名稱標題出現在其下方的一行中。有人能告訴我如何讓它們并排出現嗎？
uj5u.com熱心網友回復：
這是因為默認情況下div 和標題是塊元素，這意味著它們占據了所有空間并使其他塊元素具有單獨的行。要改變這種情況，你將需要要么float它們，將它們設定為flex，grid或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>
uj5u.com熱心網友回復：
你不能同時有 2 個標題，因為標題的定義是表格頂部的一行。因此，請確保使用正確的定義。
uj5u.com熱心網友回復：
將標題包裹在 div 中并使其具有彈性
<style>
div {
display: flex;
}
h1 {
widht: 50%;
}
</style>
<div>
<h1>HEADER1</h1>
<h1>HEADER2</h1>
</div>
Flex 方向默認為行，注意我申請width: 50%創建兩個偶數列。您可能還想對齊和對齊，查看 align-items和justify-content屬性。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/330121.html
上一篇：顯示/隱藏內容串列中的文本