html - 显示外框的 UL 子弹

标签 html css

我在让元素符号显示在无序列表中时遇到了一些问题。如果我更改 css 以在内部显示元素符号,它们应该向上,但紧挨着文本。我的伙伴想要的是元素符号显示在框架的最左侧,并且在它和文本之间有几个标签值的空间。我把边距/边框/填充搞得一团糟。 bit 无法让子弹准确到达我想要的位置!

我在下面包含了我的 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>

最佳答案

你看不到元素符号的原因是因为你在 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

(我在此示例中向 ulli 添加了一些额外的填充和边距,以补偿页面中的其他样式)

关于html - 显示外框的 UL 子弹,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16291704/

相关文章:

javascript - 我可以修改此 JavaScript 以从 Div 打印图像吗?

HTML5 音频 : How to quickly stop and restart a clip?

html - 没有js的固定纵横比和固定高度的元素

jquery - 在 Bootstrap slider 中水平和垂直居中图像

javascript - 使用 knockoutjs 虚拟元素动态创建 html 部分

html - 在可滚动菜单栏上完全显示工具提示的解决方案

javascript - 如何将 Bootstrap 模板转换为 Drupal 模板

php - jQuery 或 css 来处理选择元素中的长描述

HTML 电子邮件 BG 颜色问题

html - 如何手动制作类似 GWT 的 CaptionPanel