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>

Answer 2

你可以把它们放在一张桌子上＆＃34;吸烟＆＃34;和＆＃34;胆固醇＆＃34;在第一行另一行有数据

<table>
  <tr>
    <td><b>Smoking</b></td>
    <td><b>Cholesterol</b></td>
  </tr>
  <tr>
    <td>
        <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>
    </td>
    <td>
        <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>
    </td>
  </tr>
</table>

然后您可以根据需要更改cellspacing。

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

2 个答案: