Html 在新行上放置项目符号_Html_Css

Html 在新行上放置项目符号

html css

Html 在新行上放置项目符号,html,css,Html,Css,我正在编写这个代码示例：我想将文本和项目符号放在同步位置。但当我使用文本对齐时：居中；结果在视觉上并不好。所以我试了一下： <tr> <td colspan="3"> <ul> <li class="bullet-center-padding">• Preferred</li> <li class="bullet-center-padding">&bul

我正在编写这个代码示例：

我想将文本和项目符号放在同步位置。但当我使用文本对齐时：居中；结果在视觉上并不好。所以我试了一下：

<tr>
  <td colspan="3">
    <ul>
       <li class="bullet-center-padding">&bull; Preferred</li>
       <li class="bullet-center-padding">&bull; Premium</li>
       <li class="bullet-center-padding">&bull; Premium Onsite</li>
    </ul>
  </td>
</tr>

如何将每个新项目符号文本放在新行上？

删除

display:inline block

。这将使它们阻止元素

块级元素占用其父元素（容器）的整个空间，从而创建“块”。（）

尝试以下代码。从html中删除

“&bull；”

，从css中删除“display:inline block；”

<!DOCTYPE html>
<html>

  <head>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        text-align: center;
      }

    </style>
  </head>

  <body>

    <table style="width:100%">
      <tr>
        <td colspan="3" bgcolor="#A4A4A4">top text</td>
      </tr>
      <tr>
        <td>
          <table style="width:100%">
            <tr>
              <td colspan="2" style="font-family:verdana; color:#424242">main list</td>
            </tr>
            <tr>
              <td colspan="2">list</td>
            </tr>
            <tr>
              <td colspan="3">
                <ul>
                  <li class="bullet-center-padding">Preferred</li>
                  <li class="bullet-center-padding">Premium</li>
                  <li class="bullet-center-padding">Premium Onsite</li>
                </ul>
              </td>
            </tr>
          </table>
        </td>
        <td>
          <table style="width:100%">
            <tr>
              <td colspan="3" style="font-family:verdana; color:#424242">main list</td>
            </tr>
            <tr>
              <td>for test one</td>
              <td>and test second</td>
              <td>1 test threee</td>

            </tr>
            <tr>
              <td colspan="3">
                <ul>
                  <li class="bullet-center-padding">Preferred</li>
                  <li class="bullet-center-padding">Premium</li>
                  <li class="bullet-center-padding">Premium Onsite</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td colspan="3">
                <ul>
                  <li class="bullet-center-padding">Preferred</li>
                  <li class="bullet-center-padding">Premium</li>
                  <li class="bullet-center-padding">Premium Onsite</li>
                </ul>
              </td>
            </tr>



          </table>
        </td>

      </tr>
      <tr>
        <td colspan="3" bgcolor="#D8D8D8">bottom text</td>
      </tr>
    </table>

  </body>

</html>

这就是我对你的css代码所做的，只是用你的css代码更新它

    .bullet-center-padding {
  display: inline-block;
  text-align: left;
  float:left;
  width:100%;
  padding-left: 0px;
  margin: 0px;
}

通过删除

显示：内联块

？还可以使用

列表样式类型：无

删除

li

默认样式是否有其他解决方案。现在子弹不同步了？@PeterPenzov，你说的“同步”是什么意思？@IvankaTodorova抱歉，直到我贴出地雷-现在就把地雷移除，才看到你的答案。

.bullet-center-padding {

  text-align: left;
  padding-left: 0px;
  margin: 0px;
}

    .bullet-center-padding {
  display: inline-block;
  text-align: left;
  float:left;
  width:100%;
  padding-left: 0px;
  margin: 0px;
}