0

画面サイズに合わせた画像があります。左、右、閉じるボタンを画像にとどめようとしていますが、画面の端にとどまらせることしかできません。

JSFIDDLE

#full_image ul{
  margin:0;
  padding:0;
  list-style:none;
  width:100%;
  white-space: nowrap;
  overflow:hidden;
 }
#full_image li{
  display:block;
  margin:0;
  padding:0;
}
#full_image li a {display:block}
#full_image ul li img{ margin:0 auto; max-width:100%}

#full_image .full_close{
  background-color: red;
  top: 10px;     
  cursor: pointer;    
  height: 29px;
  opacity: 1;
  position: absolute;    
  width: 29px;
  z-index: 999;
  right: 10px;
 }
#full_image .next_big{
  background-color: red;
  top: 50%;     
  cursor: pointer;    
  height: 29px;
  opacity: 1;
  position: absolute;    
  width: 29px;
  z-index: 999;
  right: 0px;
}

#full_image .prev_big{
  background-color: red;
  top: 50%;     
  cursor: pointer;    
  height: 29px;
  opacity: 1;
  position: absolute;    
  width: 29px;
  z-index: 999;
  left: 0px;
  color: #222;
   }


<div id="full_image"> 
  <ul><li><a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a></li> </ul>    
    <a href="#" class="full_close"></a>
    <a href="#" class="button next_big"></a>
    <a href="#" class="button prev_big"></a>

   </div>
4

2 に答える 2

2

親コンテナで display:block を使用すると、全幅に引き伸ばされます。display:inline-block を使用するか、要素をフロートする必要があります。

古いブラウザーをサポートする必要がある場合は、このトリックが機能する可能性があります。

#full_image{
     display:inline-block;
     *display:inline;/* For IE7*/
     *zoom:1/* For IE7*/
     text-align:left;
    }

li a のディスプレイ ブロックを取り外す必要があります。

#full_image div に相対的な位置を追加して、絶対に配置されたアイテムが画面ではなくその div 内に配置されるようにする必要もあります。

更新されたフィドルは次のとおりです。 http://jsfiddle.net/kvE96/15/

于 2013-09-03T22:24:35.817 に答える
0

コンテナをフォーマットしてdisplay:inline-block（実際には画像と同じ幅になるように）、position:relative子の絶対配置の基準点にします。

http://jsfiddle.net/kvE96/11/を参照してください

于 2013-09-03T22:21:17.327 に答える