Question

我正在使用html / css完成简历布局。我想，我遇到的问题是继承问题。我在网上做了一些研究，这似乎是一个相当常见的问题，通常与IE相关（插入关于IE的咒骂）。

这就是我的尝试：

修改的我想让父列表项下划线，没有项目符号（光盘）。我希望孩子（嵌套列表）有一个项目符号（光盘），没有下划线。

所以我去JSfiddle and cut out the sections of the code（CSS规范化检查）试图找出发生了什么以及我可能做错了什么。

HTML：

<h3>Qualifications Summary</h3>
            <ul id="qualifications">
              <li>BS in Computer Animation with a focus on art, design, illustration, and motion graphics.</li>
            </ul>


     <h3>Related Experience</h3>
            <ul class="experience">
              <li>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios 
                <ul>
                  <li>Educator, Illustrator, Graphic & Web Designer</li>
                 </ul>
               </li>
               <li>Nov 2006 - April 2008 ~ <span class="jobtitle">Graphic / Web Design</span> ~ National A1 Inc, Philadelphia, PA
                        <ul>
                            <li>Junior Designer</li>
                      </ul>
                    </li>
                </ul>

这是CSS：

ul {
    padding-bottom: 15px;
    margin:0px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 14px;
}
/*Nested List Issues*/

ul.experience li {
    text-decoration:underline;
    list-style: none;
}
ul.experience ul li{
    text-decoration:none;
    list-style: disc;
}

即使编写了代码并且只使用了直接与之相关的CSS，我仍然会收到错误。

问题我一直在问自己：

1）Normalize code中有什么东西吗？ 不是我能看到的。

2）是浏览器/版本吗？ 我主要使用Chrome 36.x.我在IE和Firefox中检查过它。出现同样的问题。

3）还有另一种方法吗？ 也许并且很可能我的语法或用法是错误的。我尝试过其他方法，包括＆gt;选择器，但我得到的最多是嵌套li上的光盘显示。

我做了其他的尝试，但因为我是新人....我还不能发布它们。：）

我似乎无法让它发挥作用。我做错了什么？

修改的

目前的建议是围绕父元素的内容和样式放置span标记。到目前为止似乎有效。它为标记添加了更多代码，而不是专注于CSS肌肉。不雅但功能齐全。

Answer 1

规范化设置会导致要删除的列表项上的边距和填充。例如，尝试将列表项设置为margin-left为2em。另外，不要将text-decoration放在外li上，而是将文字放在一个范围内，然后在其上设置text-decoration。

Answer 2

你没有说明问题到底是什么，但我会假设这是两件事：

1）下划线text-decoration属性显示在子列表项中。在你查看标记之前，这有点令人困惑：

<ul class="experience">
  <li>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios
  <ul>
    <li>Educator, Illustrator, Graphic & Web Designer</li>
   </ul>
 </li>
...

请注意，{<1}}的第一级列表项在关闭子列表后才会关闭。这意味着即使您将子列表项覆盖在子列表项上，子列表也会获得下划线外观（因为该属性实际上位于父列表项上）。

要解决此问题，请将要加下划线的部分包装在另一个元素中，例如跨度，并将下划线样式应用于跨度：

<ul class="experience">

CSS：

<ul class="experience">
  <li><span>Jun. 2002 – Present ~ <span class="jobtitle">Freelance Illustrator & Web Designer</span> ~ Drakenhart Studios</span>
  <ul>
    <li>Educator, Illustrator, Graphic & Web Designer</li>
   </ul>
 </li>
...

2）我假设的另一个问题是光盘没有出现。这是因为normalize.css会从所有列表中删除ul.experience > li span { text-decoration:underline; }和margin。将其添加回来：

padding

fiddle

Answer 3

如果您取消选中＆＃34;规范化的CSS＆＃34;在小提琴选项（小提琴的左侧窗格）上你的代码应该以某种方式工作......（它对我有用）。

Answer 4

使用steveax和Steven Don的建议我仍然遇到麻烦。我意识到问题的一部分是Bootstrap 3.0。在Jssfiddle中挑出代码和CSS之后，虽然它主要在那里工作，但它仍然没有在我的工作草案中工作。

在对html和css进行了一些调整之后，我终于得到了一点点问题。但是，它在JSFiddle中工作的地方，它并没有在我的工作代码中工作。

因为我使用bootstrap，我仔细检查了文档，但仍然无法找到问题。所以我使用了Chrome的检查元素。由于某种原因，list-style不会覆盖Bootstrap中更具体的list-style-type。

所以我改变了CSS，所以我没有关闭，然后继续执行Bootstrap的列表样式。我刚刚关闭了带有下划线的主入口标题的光盘，然后在其上使用了span标签（第一个li）来强调它，同时避免为子元素加下划线。

我甚至删除了职位名称周围的范围，而是使用了强标记。

HTML

 <ul class="experience">
                <li><span>Jun. 2002 – Present ~ <b>Freelance Illustrator &amp; Web Designer</b> ~ Drakenhart Studios </span>
                <ul>

                  <li>Educator, Illustrator, Graphic & Web Designer</li>

                 </ul>

               </li>
</ul>

CSS

ul.experience > li { padding-left:2em; }
ul.experience ul { list-style:disc; padding-left:2em; }
ul.experience > li span { text-decoration:underline; }

之前我在CSS中使用的代码较少。它现在正常运作。

Answer 5

尝试使用CSS important。下面是如何使用它的一个例子：

text-align: center !important;

正如你所看到的，它就在分号之前。希望这有帮助！

嵌套列表中从父级继承的CSS样式

5 个答案: