私はこれに対する答えを見つけるために戦ってきました.検索が苦手なのか、それとも何なのかわかりませんが、解決策を見つけることができないようです.
基本的に、「メニュー」(#menu) という DIV があり、ブラウザー画面の上部に伸びる青いバーです。その中に、順序付けされていないリスト (ボタンを作成するため) とアンカー (ハイパーリンク) を設定しましたリストにはパディングがあり(テキストが適切に配置されるため)、美しいボタンが作成されますが、これを行うと、ハイパーリンクによって行がメニュー div の上に流れ、乱雑に見えます。以下は私のコードです、これを防ぐ方法はありますか?
HTML:
<div id="menu">
<ul>
<li><a href="#">test</a></li>
</ul>
</div>
CSS:
* { font-family: Helvetica; }
body { margin: 0; background: #fff; }
#menu { overflow: inline-block; width: 100%; background: #0b9be5; text-align: center; }
#menu ul { background: #075f8d; poistion: absolute; margin: 0px; list-style-type: none; }
#menu li { display: inline; }
#menu a { padding: 1%; border: 1px solid black; font-weight: bold; color: black; text-decoration: none; }
#menu a:hover { background-color: #0b9be5; }
前もって感謝します!
敬具
マシュー