如何对齐两个不同的子弹点？

Question

如何让两个不同的子弹点相互靠近？我有两个类别的代码:吸烟和胆固醇.我希望胆固醇及其所有要点都能在页面右侧与所有吸烟点保持同步.

<b>Smoking</b>
<br>
<ul>
<li>20.9 percent of Non-Hispanic black males</li>
<li>19.8 percent of Non-Hispanic white males</li>
<li>17.9 percent of Non-Hispanic white females</li>
<li>14.3 percent of Hispanic males</li>
<li>13.4 percent of Non-Hispanic Asian males</li>
<li>13.8 percent of Non-Hispanic black females</li>
<li>7.1 percent of Hispanic females</li>
<li>4.1 percent of Non-Hispanic Asian females</li>
</ul>

<b> Cholesterol</b>

<ul>
<li>37.0 percent of NH white males</li>
<li>43.4 percent of NH white females</li>
<li>32.6 percent of NH black males</li>
<li>36.1 percent of NH black females</li>
<li>43.1 percent of Hispanic males</li>
<li>41.2 percent of Hispanic females</li>
<li>39.9 percent of NH Asian males</li>
<li>40.5 percent of NH Asian females</li>
</ul>

Answer 1

您可以包装每个列表和列表标题,并应用于display: inline-block包装器.

.content {
  display: inline-block;
}

<div class="content">
  <b>Smoking</b>
  <ul>
    <li>20.9 percent of Non-Hispanic black males</li>
    <li>19.8 percent of Non-Hispanic white males</li>
    <li>17.9 percent of Non-Hispanic white females</li>
    <li>14.3 percent of Hispanic males</li>
    <li>13.4 percent of Non-Hispanic Asian males</li>
    <li>13.8 percent of Non-Hispanic black females</li>
    <li>7.1 percent of Hispanic females</li>
    <li>4.1 percent of Non-Hispanic Asian females</li>
  </ul>
</div>

<div class="content">
  <b> Cholesterol</b>
  <ul>
    <li>37.0 percent of NH white males</li>
    <li>43.4 percent of NH white females</li>
    <li>32.6 percent of NH black males</li>
    <li>36.1 percent of NH black females</li>
    <li>43.1 percent of Hispanic males</li>
    <li>41.2 percent of Hispanic females</li>
    <li>39.9 percent of NH Asian males</li>
    <li>40.5 percent of NH Asian females</li>
  </ul>
</div>