Question

我是html的新手，并试图通过在线教程来解决这个问题。我有一个横跨页面顶部的菜单栏。现在我将菜单栏放在div标签中，在内容中，我有

<nav>
 <li>
 <a id="l1" href="whatever.com/about/">About</a>
 <a id="l2" href="whatever.com/content/">Content</a>
 <a id="l3" href="whatever.com/history/">History</a>
 <a id="l4" href="whatever.com/Team/">Team</a> 
 </li>
</nav>

我想定位链接并更改字体，我的印象是我会使用以下格式的格式：

<style>
.l1
{
position:relative;
top:5px;
right:30px;
}
</style>

然而，这似乎不起作用，我找不到任何有用的教程。任何人都可以给我关于如何适当格式化的建议样式我的链接？

Answer 1

你在CSS中使用的点符号是用于类，而不是ID，这应该有效：

<nav>
 <ul>
  <li><a class="l1" href="whatever.com/about/">About</a></li>
  <li><a class="l2" href="whatever.com/content/">Content</a></li>
  <li><a class="l3" href="whatever.com/history/">History</a></li>
  <li><a class="l4" href="yabidu.com/Team/">Team</a></li>
 </ul>
</nav>

元素的ID id="foo"在CSS中使用#foo进行访问，它们也应该是完全唯一的，因此页面上的元素ID不应相同。另一方面，class="bar"的类允许多次使用，并且可以使用.bar在CSS中访问。

您还使用了无效语法，<li>（列表项）总是应该直接位于<ul>（无序列表）或<ol>（有序列表）中，我有为你修好了你的标记。

Answer 2

您的HTML5语法错误..

<nav>
<ul>
<li><a href="#">LINK<a></li>
.....
</ul>
</nav>

要访问li元素，请使用

nav ul li a {
font-size:20px;
font-weight:bold;
position:relative;
top:XX;
left:XX;
}

Answer 3

解决方案1：

<强> HTML：

<nav>
    <a href="whatever.com/about/">About</a> 
    <a href="whatever.com/content/">Content</a>
    <a href="whatever.com/history/">History</a>
    <a href="yabidu.com/Team/">Team</a> 
</nav>

<强> CSS：

nav a {
    float: left;
    padding: 0 20px;
}

DEMO 1

解决方案2：

<强> HTML：

<nav>
    <ul>
        <li>
            <a href="whatever.com/about/">About</a> 
        </li>
        <li>
           <a href="whatever.com/content/">Content</a>
        </li>
        <li> 
           <a href="whatever.com/history/">History</a>
        </li>
        <li>
           <a href="yabidu.com/Team/">Team</a> 
        </li>
    </ul>
</nav>

<强> CSS：

nav ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}     

nav ul li {
    float: left;
    padding: 0 20px;
    list-style: none;
}

DEMO 2

Answer 4

在此上下文中，元素li不允许作为元素nav的子元素。

可以使用元素li的上下文：

在ol元素内。
在ul元素内。
在menu元素内

HTML：

<nav>
    <ul>
        <li><a href="whatever.com/about/">About</a></li>
        <li><a href="whatever.com/about/">Content</a></li>
        <li><a href="whatever.com/about/">History</a></li>
        <li><a href="whatever.com/about/">Team</a></li>
    </ul>
</nav>

不要将id用于样式元素（仅在必要时使用）。

使用css选择器：

nav ul li a { ... }

或者如果您有兴趣在a元素中仅为子项li设置样式：

nav li > a { ... }

对于内联显示li元素，您必须添加下一个样式

nav li {
    display: inline-block;
    *display: inline; // fix for ie7
}

或float:left代替display:inline-block;

如何使用样式标记来更改导航标记中的链接？

4 个答案: