0

我是 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>

但是，这似乎不起作用，我找不到任何有用的教程。任何人都可以就如何正确设置链接的格式和样式给我建议吗？

4

4 回答 4

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>

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

您还使用了无效的语法，<li>（列表项）始终应该直接位于<ul>（无序列表）或<ol>（有序列表）内部，我也为您修复了您的标记。

于 2012-09-05T10:06:33.027 回答
0

你的 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;
}
于 2012-09-05T10:08:43.713 回答
0

解决方案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;
}​  ​

演示 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;
}​  ​

演示 2

于 2012-09-05T10:08:52.107 回答
0

在此上下文中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;

于 2012-09-05T10:23:52.933 回答