Question

我有一个基本的CSS问题。

我有一个清单，但我无法显示子弹......

我可以让它们显示的唯一方法是将位置设置为inside，但我希望它设置为outside，因为它是..无论我添加多少填充或nmargin在左边，我似乎无法显示子弹。

这是应用的CSS ..我已经将它应用于所有...... UL，LI等

list-style-image: none;
list-style-position: outside;
list-style-type: square;

这是HTML

<ul class="static" style="display: block; ">
    <li class="static">
        <a class="static menu-item" href="/producers/products-services/Pages/group-medical-plans.aspx"><span class="additional-background"><span class="menu-item-text">Group Medical Plans</span></span></a>
    </li>
    <li class="static">
        <a class="static menu-item" href="/producers/products-services/Pages/self-funding-administration.aspx"><span class="additional-background"><span class="menu-item-text">Self-Funding Administration</span></span></a>
    </li>
    <li class="static">
        <a class="static menu-item" href="/producers/products-services/Pages/workers-comp.aspx"><span class="additional-background"><span class="menu-item-text">Workers Comp</span></span></a>
    </li>
    <li class="static">
        <a class="static menu-item" href="/producers/products-services/Pages/cobra-administrative-services.aspx"><span class="additional-background"><span class="menu-item-text">COBRA Administrative Services</span></span></a>
    </li>
    <li class="static">
        <a class="static menu-item" href="/producers/products-services/Pages/medicare-plans.aspx"><span class="additional-background"><span class="menu-item-text">Medicare Plans</span></span></a>
    </li>
    <li class="static">
        <a class="static menu-item" href="/producers/products-services/Pages/individual-family-plans.aspx"><span class="additional-background"><span class="menu-item-text">Individual-Family Plans</span></span></a>
    </li>
    <li class="static">
        <a class="static menu-item" href="/producers/products-services/Pages/selling-area-maps.aspx"><span class="additional-background"><span class="menu-item-text">Selling Area Maps</span></span></a>
    </li>
    <li class="static">
        <a class="static menu-item" href="/producers/products-services/Pages/provider-networks.aspx"><span class="additional-background"><span class="menu-item-text">Provider Networks</span></span></a>
    </li>
</ul>

修改

好吧，它仍然无法正常工作，这是我的LESS

ul {
    background-color: @color-grey-border;
    width: 100%;
    padding-left: 30px !important;
    list-style-type: square !important;
    list-style-image: none !important;
    list-style-position: outside !important;
    overflow-x: visible !important;
    margin-left: 30px !important;

    li {
        padding-left: 30px !important;
        list-style-type: square !important;
        list-style-image: none !important;
        list-style-position: outside !important;
        overflow-x: visible !important;
        margin-left: 30px !important;

        .menu-item {
            border-bottom-color: #fff !important;
            padding: @base * .5 0 !important;
            width: 100% !important;
        }
    }
}

编辑 -

以下是4个截图

http://see.weareinto.com/BtJh - http://see.weareinto.com/BtRh

http://see.weareinto.com/BsvD - http://see.weareinto.com/Bsjs

Answer 1

拥有这些样式应该足够了：

ul {
    list-style: square outside;
    margin-left: 20px;
    padding-left: 0;
}

正如您在此处所见：http://jsfiddle.net/3dYKK/

如果这不起作用，您需要发布更多CSS或构建示例jsfiddle页面，以便我们提供帮助。

编辑：这是新的jsfiddle页面：http://jsfiddle.net/3dYKK/3/它包含你的CSS，它仍然有效。这是影响风格的其他因素，而不是你发布的内容 - 你有一个我们可以看到问题的真实页面吗？

Answer 2

原来是加载后正在应用的一些Javascript：\
我讨厌继承人们以错误的方式解决问题的项目。

Answer 3

ul.a {
      list-style-type: circle;
    }

<ul class="a">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Coca Cola</li>
 </ul>

CSS：隐藏了UL子弹

3 个答案: