html - 试图让左右箭头粘在大图像的边缘。

Question

我有一个缩放到屏幕大小的图像。我试图让左、右和关闭按钮留在图像上，但我只能让它们留在屏幕边缘。

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>

Answer 1

当您在父容器上使用 display:block 时，它们将拉伸(stretch)整个宽度。您将不得不使用 display:inline-block 或 float 元素。

如果您必须支持旧版浏览器，这个技巧可能会奏效:

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

您必须移除 li a 上的显示 block 。

您还必须添加相对于 #full_image div 的位置，以确保绝对定位的元素位于该 div 内而不是屏幕内。

这是一个更新的 fiddle : http://jsfiddle.net/kvE96/15/