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

このコンテキストでは、要素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 に答える
0

HTML5 systax が間違っています。

<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 に答える