1

私はここにウェブサイトを構築しています：argit.bounde.co.uk

私は解決策を見つけようと何時間も探していました。流動的な幅になる独自のスライダーを作成しようとしているため、可能な場合は高さ/幅を定義できません。スライダーの大部分はストック画像で動作していますが、その下に要素を配置すると、意図したものよりも 5 ピクセル低くなります。これは、私がテストした IE を除くすべてのブラウザで発生します。スライダーの上に表示されるように、スライダーの下にあるバナーに負の上部マージンを設定したいのですが、この 5px のマージンの原因を突き止めるまではできません。

htmlはここにあります：

<div id="slider">
  <div id="sliderwidth">
    <ul>
      <li><img src="imgs/slider/img1.jpg" alt="image 1"></img></li>
      <li><img src="imgs/slider/img2.jpg" alt="image 2"></img></li>
      <li><img src="imgs/slider/img3.jpg" alt="image 3"></img></li>
      <li><img src="imgs/slider/img4.jpg" alt="image 4"></img></li>
    </ul>                           
  </div>                        
</div>  

<div id="sliderborder">

私が試したこと：

すべての jQuery の削除:機能しませんでした。
スライダーをスタイリングするすべての CSS の削除:機能しませんでした。
img の高さを 300px に設定:機能しませんでした。
li の高さを 300px: wordedに設定します。
imgs を高さ 300px の div に置き換える: 動作しました。
スライダーのすべての要素にパディング 0、マージン 0 を設定:機能しませんでした。
検証エラーのチェック:完全に検証済み。
チェック済みの画像は高さ 300pxです。
開発ツールのすべての要素をチェックして、不正な margin/padding: none foundをチェックしました。

私は文字通りアイデアがありません。どんな助けでも大歓迎です!!

4

4 に答える 4

6

奇妙なことは何もありません...display:block画像に追加するだけです。

デフォルトでは、すべての画像はinline-elements(インラインまたはインライン ブロック) であり、テキスト行として処理されます。yこのスペースは、またはの吊り下げ部分gが行く場所です。これは非常に説明が不十分ですが、アイデアはわかります。

div#slider ul li img {
    width: 100%;
    display: block;
}
于 2013-04-10T09:21:49.280 に答える
2

試してみてください

div#slider ul img {
    display: block;
    width: 100%;
}

また

div#slider ul img {
    vertical-align: top;
    width: 100%;
}

デフォルトでは、画像はインラインブロック要素であるため、適切な垂直方向の配置設定が必要になる場合があります

于 2013-04-10T09:17:45.963 に答える
1

vertical-align: bottom;次のように追加するだけです。

div#slider ul li img {
    width: 100%;
    vertical-align: bottom;
}
于 2013-04-10T09:21:29.867 に答える