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>
    </ul>
</div>

这个想法是我想为无序列表设置样式。

我的 CSS 代码如下所示：

#navigation li {
    display: inline; 
}

显然这不起作用，但是我希望有人可以指导我如何在 div 标签中实际定位元素的正确方向？

编辑：好吧，对不起大家，我忘了在我的 HTML 代码中引用我的 css 页面......天哪！

4

8 回答 8

2

事实上，这段 CSS 代码可以工作。您的代码现在将应用于li分隔符内的所有标签，带有idof navigation。

最有可能的是，您认为它不起作用的原因是因为它是属性inline的默认值display。因此，您可能不会更改<li>标签的任何格式或样式。您是否尝试将特定样式应用于<li>标签？

于 2013-09-18T02:35:30.960 回答
2

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;
}

看演示

于 2014-03-19T11:43:32.893 回答
0

文本和代码对我理解你的问题没有任何帮助......但我假设你只是在学习样式和编码......我的建议是尝试像这样在小提琴上添加它：

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

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

于 2013-09-18T02:37:47.333 回答
0

这种风格非常好，并且确实有效。你是在问如何进一步设计你的 li 的风格吗？

如果是这样，您可能需要查看以下资源，了解如何准确选择要使用 CSS 设置样式的标签：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

于 2013-09-18T02:37:59.993 回答
0

你在做正确的事。你所拥有的应该可以正常工作。有几种方法可以选择该列表...

选择<ul>

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

选择<li>s

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可以在这里找到 特定选择器的列表

于 2013-09-18T02:42:30.030 回答
0

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

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

见jsFiddle

于 2013-09-18T02:48:02.460 回答
0 
#navigation li{ display: inline-block;}

我认为这就是你想要做的。

于 2013-09-18T02:45:18.933 回答
0

查看我创建的这个jsfiddle 。这将引导您朝着正确的方向前进。:)

要精确定位元素，只需像您现在所做的那样，例如，

#navigation ul {
  list-style:none;
  margin:0;
  padding:0;
}
#navigation li {
  float:left;
  border-left:1px solid #ccc;
}
于 2013-09-18T02:46:29.340 回答