Question

我在使用无序列表中显示子弹时遇到了一些麻烦。如果我改变css以将子弹显示为内部，它们应该向上，但是在文本旁边。我的伙伴想要的是子弹出现在框架的最左侧，并且在它和文本之间有几个标签空间。我已经搞了很多边距/边框/填充。有点不能把子弹准确地送到我想要的地方！

我在下面包含了我的html和css。

谢谢！詹姆斯

相关网页：

http://www.pingdynamic.com/sites/slva/services.html

CSS：

ul {
list-style-type: circle;
list-style-position: outside;
}

li {
margin-left: 50px;
}

HTML：

<h2 class="subheading">You Dream It.  We Bring To Life.</h2>
        <br>
        <p>SLVA is proud to offer the following servies:</p>

        <ul>
            <li>Consultation - Let's discuss your goals and ideas and how to achieve them.</li>
            <li>High performance parts, sales and installation.</li>
            <li>Custom body work - From wide-body kits and ground effects to really any custom aesthetic modification you can imagine.</li>
            <li>Custom carbon fiber design, forming and application.</li>
            <li>Custom 3-stage paint work.</li>
            <li>Full fabrication services - We work with all materials (including steel, aluminum, stainless steel) and methods
            (traditional and TIG welding) </li>
            <li>Custom chassis design and modification.</li>
            <li>Custom suspension design, modification and fabrication.</li> 
        </ul>
        </div>

Answer 1

您无法看到子弹的原因是因为您在style.css的第10行中有overflow-x:hidden - 这适用于包括ul和{{ 1}}。

尝试这样的事情：

li

示例：http://cssdesk.com/bgCgj

（我在此示例中为<!DOCTYPE html> <html lang="en"> <head> <title>SVLA</title> <style> ul { list-style-type: circle; list-style-position: outside; margin-left: 10px; overflow: visible; } li { padding-left: 50px; overflow: visible; } </style> </head> <body> <h2 class="subheading">You Dream It. We Bring To Life.</h2> <br> <p>SLVA is proud to offer the following services:</p> <ul> <li>Consultation - Let's discuss your goals and ideas and how to achieve them.</li> <li>High performance parts, sales and installation.</li> <li>Custom body work - From wide-body kits and ground effects to really any custom aesthetic modification you can imagine.</li> </ul> </body>和ul添加了一些额外的填充和边距，以补偿页面中的其他样式。

Answer 2

将其内容放在相对定位的范围内，然后您可以通过范围的左侧属性控制空间。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 4373046</title>
        <style>
            li span { position: relative; left: -10px; }
        </style>
    </head>
    <body>
        <ul>
            <li><span>item 1</span></li>
            <li><span>item 2</span></li>
            <li><span>item 3</span></li>
        </ul>
    </body>
</html>

来源：CSS: Control space between bullet and <li>

Answer 3

使用像@fkim所说的跨度和相对定位，或删除子弹点并使用伪元素将它们放回填充：

ul {
margin: 0;
padding: 0;
}

li {
margin: 0;
list-style-type: none;
}

li:before {
content: "•";
padding-right: 50px;
}

示例：http://cssdesk.com/

显示外部框架的UL子弹

3 个答案: