-1

ドキュメントに本当に基本的なナビゲーション リンクをいくつか入れたいと思います (ipad で li:hover の問題が発生します)。

次の html コードがあり、ドキュメント ヘッダー スタイルのナビゲーション リンクが必要です。

そのためTop、左揃えになり、navグループは上部の中央に配置され、next右揃えになります。

ただし、コンテンツはすべて、div に広がるのではなく、div の左側に沿ってぎゅうぎゅう詰めになります。私は何を間違っていますか？私はcssを試してみますが、それを行う方法を理解するのに十分な知識がありません.

<table id='innav'>
 <col width='20%'/>
 <col width='60%' />
 <col width='20%' />
  <tr> 
    <td align='left'>
        <a href="../index.html">Top</a>
    </td>

    <td align='center'>
        <nav> 
            <a href="./section1.html">Section 1</a>| 
            <a href="./section2.html">Section 2</a>| 
            <a href="./section3.html">Section 3</a> 
        </nav>
    </td>

    <td align='right'>
        <a href="./section1.html">Next</a>
    </td>
  </tr>
</table>

編集: テーブル + css バージョンと純粋な css バージョンの両方を追加する -

上記の作業を非常にエレガントにするcssは

#innav {
  width: 100%;
  margin: 0pt;
  padding: 0pt;
}

私が作成したはずの純粋な css バージョン - ただし、見た目も感じもかなりエレガントではありません。

html は明らかにすっきりしていて読みやすい

<ul id='innav1'>
    <li id='leftnav'>
        <a href=".index.html">Top</a></li>
    <li id='centernav'> 
        <ul>
        <li><a href="./section1.html">UK Process</a>|</li>
        <li><a href="./section2.html">NA Process</a>|</li>
        <li><a href="./section3.html">AP Process</a></li> </ul> </li>
    <li id='rightnav'>
        <a href="./section1.html">Next</a> </li> </ul>

css は次のようになります。

#centernav > ul > li {
  display: inline;
  width: 70%;
  margin: 0pt;
  padding: 0pt;
}

#centernav {
  width: 30%;
  margin-left: 30%
}

#leftnav {
  float: left;
  width: 7%;
  margin: 0pt;
  padding: 0pt;
}

#rightnav {
  float: right;
  width: 10%
}

#innav1 li{
  list-style-type: none;
  display: inline-block;
}

これには、いくつかの冗長なキー値があり、最終的なコンテンツがページの上部にきれいに分散されていないと確信しています。

css ソリューションに重点が置かれていることを考えると、なぜそれが優れているのか、テーブル ソリューションと同じくらいきれいに見えるようにする方法を教えてもらえますか?

ありがとう

4

2 に答える 2

2

マークアップは次のようになります。

<div class="xyz">
     <ul> 
         <li>
            <a href="../index.html">Top</a>
        </li>
       ...
   </ul>
</div>

CSS でスタイルを設定できます。たぶんBootstrapフレームワークを見てください。

于 2013-09-03T06:46:26.863 に答える