センタリングされたULメニューの両側に水平線を追加する必要があります。ページに背景イメージがあるため、ソリューションは透明な背景を持つ必要があります。線は画面の側面に到達する必要があります。私はいくつかの例を見てきましたが、https://stackoverflow.com/a/23584310/4266235は私が必要とするものにかなり近いです。ULナビゲーションの前後の行
しかし、私は解決できない1つの違いがあります。フロントページにはメニューの下に大きなロゴがありますが、他のすべてのページではロゴは小さく、メニューの左側にあります。
フロントページ：
|-------- Home Page1 ... PageN --------|
| [Large logo] |
すべての他のページ：前：
|---- [small logo] Home Page1 ... PageN ----|
最初の問題は、小さなロゴがULを使用して行われていることであるが
は、これは私が欲しいものです。私は小さなロゴに代わり<のimg >を使用している場合は、フロントページは<体クラス=「フロントページ」>
を持って
#navi { margin: 0; text-align: center; }
#navi ul { list-style-type: none; }
#navi ul:before { display: inline-block; content: url("small-logo.png"); vertical-align: middle;}
.front-page #navi ul:before { content: ""; }
ような何か私はラインがフロントページには非常にうまく機能し得ることができますしかし、他のページでは、左側のメニューがメニューに近づきすぎてしまいます。明らかに私はロゴの前にそれを止める方法を理解できなかったからです。かなりよく私は、私はそれらがウィンドウの境界に達するためにリンクされている答えのパーセンテージを変更する必要があることを意味しますが、CTRL - マイナスでページをズームする場合、彼らは国境に触れません100％
編集：ここはフィドルの例ですhttps://jsfiddle.net/sowcoox1/赤い線も左側に表示されます。ロゴイメージがある場合は、前に停止する必要があります。そうでない場合は、ホームテキストの前で停止します。また、画面の境界線に達するように見えるが、ズームアウトすると、線が長くないことがわかる。
は、私たちはあなたが望むものを見るためにバイオリンを必要とする – Swellar
でお願い申し上げます。 –
CarlとDierigに感謝します。私は何をしようとしているかを示すはずのフィドルを追加しました。 – robblond