logo标签列表

如何为 div 标签内的元素设置样式？

htmlcss
4
我知道这是一个新手在社区中提出的问题，然而我无法在任何地方找到正确的答案。我的HTML片段如下：
<div id="navigation">
    <!--Create an unordered list in order to get the title bar of the site -->
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
    </ul>
</div>

我想要给无序列表添加样式。

我的CSS代码大致如下：

#navigation li {
    display: inline; 
}

显然这样做行不通，但我希望有人能指导我如何准确地定位div标签中的元素？

编辑：抱歉，大家，我忘记在HTML代码中引用我的css页面了...天哪！

你为什么说它不起作用？你是否使用浏览器的开发工具检查了元素样式？你的CSS规则没有产生正确的结果并不意味着它们没有应用于元素。 - plalx
你解决了吗？ - Riskbreaker
8个回答
3

HTML:

<div id="navigation">
    <!--Create an unordered list in order to get the title bar of the site -->
    <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="about.html">About</a>
        </li>
        <li><a href="">Category3</a>
        </li>
        <li><a href="">Category4</a>
        </li>
    </ul>
</div>

CSS：

#navigation li {
    float: left;
    margin-right: 10px;
}
#navigation ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #3e3e3e;
}

See demo

2
这段CSS代码实际上是有效的。现在，您的代码将应用于具有id为navigation的分隔符内所有li标记。您认为它不起作用的原因很可能是因为inline是display属性的默认值。因此，您可能没有更改任何< li >标记的格式或样式。您是否尝试应用特定样式于< li >标记？
0

对我来说，文本和代码都无法让我理解你的问题...但我猜想你只是在学习样式和编码...我的建议是像这样在fiddle上添加它：

#navigation {overflow: hidden; margin: 1em; border: 1px solid #ff0000;}

http://jsfiddle.net/Riskbreaker/58u6P/

0

你做得很对。你现在的代码应该可以正常工作。 有几种方法可以选择那个列表...

选择 <ul>

ul{}
div ul{}
#navigation ul{}
div#navigation ul{}

选择 <li> 元素

li{}
div li{}
div ul li{}
div#navigation li{}
div#navigation ul li{}
#navigation li{}
#navigation ul li{}
#navigation ul li:nth-child(3){}

越具体的选择器会覆盖较不具体的选择器。可以在这里看到 - http://codepen.io/anon/pen/psjgD 特定选择器列表可在此处找到。
0
#navigation li{ display: inline-block;}

我想这就是你想要做的事情。

0

看看我创建的jsfiddle吧，这会指引你朝着正确的方向前进。 :)

要精确定位元素，只需像你现在所做的一样即可，例如，

#navigation ul {
  list-style:none;
  margin:0;
  padding:0;
}
#navigation li {
  float:left;
  border-left:1px solid #ccc;
}
0

或者，您可以使用float: left进行自动布局排列。

#navigation li {
    float: left;
    margin-right: 20px;
}
#navigation ul {
    list-style: none;
}
a {
    text-decoration: none;
}

请查看jsFiddle。

0
2
@Shivian Raptor，干得好，已更新为更完整的链接。 - guydog28
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接