2

我在让项目符号显示在无序列表中时遇到了一些麻烦。如果我更改 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>
4

3 回答 3

3

您看不到子弹的原因是因为您在 style.css 的第 10 行有 - 这被应用于包括和overflow-x:hidden在内的一大堆元素。ulli

尝试这样的事情：

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

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

ul（在此示例中，我在and中添加了一些额外的填充和边距，li以补偿页面中的其他样式）

于 2013-04-30T04:51:43.307 回答
-1

把它的内容放在一个相对定位的span中，然后你可以通过span的left属性来控制空间。

<!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：项目符号和 <li> 之间的控制空间

于 2013-04-30T03:35:29.613 回答
-1

要么使用像@fkim 所说的跨度和相对定位，要么删除项目符号点并使用伪元素将它们放回填充：

ul {
margin: 0;
padding: 0;
}

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

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

示例：http ://cssdesk.com/

于 2013-04-30T03:39:33.813 回答