1

同様の質問を検索しましたが、特に探しているものに対する解決策は見つかりませんでした。ロゴの両側に偶数のリンクを配置して、中央のロゴの周りにナビゲーション バーを配置しようとしています。ただし、ウィンドウが小さい場合、リンクはロゴの下に表示されます。基本的に、私はこのページの効果を達成しようとしています: http://www.colbowdesign.com/index.html

これまでの私のコードは次のとおりです。

HTML

    <header>
            <img src="assets/CK-Square.png" class="logo">
            <ul>
                <li><a href="#">Work</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Social</a></li>
            </ul>
    </header>

CSS

.logo {
      margin-left: auto;
      margin-right: auto;
      display: block;
}

header li{
      display: inline;
}

header {
      width: 100%
      height: auto;
      border-style: solid;
      margin: 0;
      padding: 0;
}

すべてのフィードバック/ヘルプに感謝します!

4

3 に答える 3

1

li:nth-childあなたのスタイルに追加

4 つのリストがある場合は、これを追加できます。

header li:nth-child(1), header li:nth-child(2) {
    float: left;
}
header li:nth-child(3), header li:nth-child(4) {
    float: right;
}

jsfiddleを参照してください

魅力的な外観を生成するには、少し変更する必要があります。

于 2013-05-19T04:34:45.633 に答える
-2

テーブルを使用..

<table><tr>
  <td><a href="#">Work</a></td>
  <td><a href="#">About</a></td>
    <td><img src="assets/CK-Square.png" class="logo"></td>  
  <td><a href="#">Contact</a></td>
  <td><a href="#">Social</a></td>
</tr></table>
于 2013-05-19T03:54:39.340 に答える