私のウェブサイトには、次のようなテキストのリストがあります。
私の目標は、ユーザーがこれらのテキストのいずれかにカーソルを合わせると、そのテキストに関連する画像がポップアップすることです。このようなもの:
しかし、代わりに、テキスト間にスペースを作成する次のようなものが得られます。
たとえば、相対位置と絶対位置を使用するだけです。
li { position : relative; }
li img { position: absolute; top: 0; left: 100%; }
position:absolute
image 要素を使用すると、これが発生しなくなります。
リスト項目をposition: relative
に、画像を に設定しますposition: absolute
。次に、必要に応じて配置します。(例: のようなものtop: 0; left: 100%;
)