Question

我知道这是一个来自社区新人的问题，但我无法在任何地方找到正确的答案。我的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页面...好悲伤！

Answer 1

这个CSS代码实际上是可行的。您的代码现在将应用于li id分隔符内的所有navigation代码。

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

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

See demo

Answer 3

文字和代码对我来说无法理解你的问题......但我认为你只是在学习风格和代码....我的建议是尝试将它添加到这样的小提琴中：

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

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

Answer 4

这种风格非常好并且确实有效。你在问如何进一步改变你的风格吗？

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

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

Answer 5

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

选择<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 特定选择器的列表可以是found here

Answer 6

#navigation li{ display: inline-block;}

我认为这是你正在尝试做的事情。

Answer 7

查看我创建的jsfiddle。这将指导您正确的方向。：）

要精确定位元素就像现在这样做，例如，

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

Answer 8

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

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

请参阅jsFiddle

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

8 个答案: