html - Button not absolutely positioned in section -


these buttons supposed absolutely positioned within .gallery, reason, when expand viewport, stretch outside of gallery , positioned viewport. missing here?

html:

<section class="gallery">   <div>     <a href="http://www.cnn.com">       <img src="/img/gallery-img-1.jpg" alt="cover of lookbook">      </a>   </div>   <ul>     <li><a href="http://www.cnn.com"><img src="/img/gallery-img-1.jpg" alt="cover of lookbook"></a></li>     <li><a href="http://www.cnn.com"><img src="/img/gallery-img-2.jpg" alt="some beautiful necklaces"></a></li>     <li><a href="http://www.cnn.com"><img src="/img/gallery-img-3.jpg" alt="more beautiful necklaces"></a></li>   </ul>   <button class="arrow leftarrow">&lt;</button>   <button class="arrow rightarrow">&gt;</button> </section> 

css:

.gallery {   width: 100%;   box-sizing: border-box;   position: relative; }  .gallery div, .gallery li:not(:first-child) {   display: none; }  .arrow {   position: absolute;   z-index: 9999;   background-color: transparent;   border: none;   font-size: 2em;   color: white;   cursor: pointer;   text-decoration: none; }  .leftarrow {   top: 40%;   left: 5%; }  .rightarrow {   top: 40%;   right: 5%; } 

okay, fixed it. had add display: inline-block; .gallery , kept boundries of gallery stretching beyond width of images. help, everyone!


Comments

Popular posts from this blog

javascript - how to protect a flash video from refresh? -

visual studio 2010 - Connect to informix database windows form application -

android - Associate same looper with different threads -