广场要点

我工作的代码这个例子：广场要点

我想与同步的位置子弹放置文本。但是当我使用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

我怎么能放在一个新的生产线每一个新的子弹文字？

来源

2016-03-08 Peter Penzov

通过消除'display：inline-block'？还可以使用'list-style-type：none' [fiddle]（https://jsfiddle.net/m0jux8k2/2/）去除'li'默认样式 –

删除display: inline-block。这将使他们阻止元素。

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

来源

2016-03-08 10:28:14

是否有其他解决方案。现在子弹不同步？ –

@PeterPenzov，你是什么意思的“同步”？ –

@IvankaTodorova道歉，没有看到你的答案，直到我张贴我的 - 现在删除我的。 –

尝试下面的代码。从html和“display：inline-block;”中删除"•"来自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

来源

2016-03-08 10:32:40 Nofi

这就是我与你的CSS代码，只需用你的更新

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

Demo

来源

2016-03-08 11:09:44

回答

相关问题