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 回答