Question

我正在研究这个代码示例：

我想将子弹放置在同步位置。但是当我使用text-align：center;结果在视觉上不好。所以我尝试了这个：

<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>

但这是视觉效果：

 • Preferred • Premium • Premium Onsite

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

Answer 1

删除display: inline-block。这将使它们成为块元素。

块级元素占据其父元素（容器）的整个空间，从而创建一个＆＃34;块＆＃34;。（This article helps to explain what this means.）

Answer 2

尝试以下代码。从html和＆＃34;移除"•"。 display：inline-block;＆＃34;来自css。

<!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

.bullet-center-padding {

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

Demo JsFiddle

Answer 3

这就是我用你的css代码做的事情，只需用你的更新

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

Demo

将子弹点放在新线上

3 个答案: