问题
Trying to display a set of images, inline block with overflow-x to scroll horizontally, but images are not displaying inline, I can't get them to display correctly without floating left. I'm not sure what I'm doing wrong - I've tried creating set block divs and wrapping around each links and they display inline but as soon as I code them to link, they are no longer inline. I am using this sample: http://jsfiddle.net/evqt871L/ to check my code and can't figure out why it's not working.
display:
<div class="container">
<a class="seniors" title="Seniors" href="/folio/seniors/">seniors</a>
<a class="equestrian" title="Equestrian" href="/folio/equestrian/">equestrian</a>
<a class="engagement" title="Engagement" href="/folio/engagement/">engagement</a><a class="maternity" title="Maternity" href="/folio/maternity/"> maternity</a><a class="wedding" title="Weddings" href="/folio/weddings/">weddings</a> <a class="family" title="Family" href="/folio/family/">family</a><a class="event" title="Event" href="/folio/event/">event</a>
<a class="professional" title="Professional" href="/folio/professional/">professional</a>
<a class="boudoir" title="Boudoir" href="/folio/boudoir/">boudoir</a>
</div>
Sample CSS:
.container{
white-space:nowrap;
overflow-x:auto;
}
.homepage a.seniors{font-size: 0pt; background: url(images/fp-seniors.png) top center no-repeat; width: 353px; height: 570px; margin: 5px; display: inline-block;}
.homepage a.seniors:hover{text-align: center; height: 320px; padding-top: 250px; font-size: 3em; text-transform: uppercase; text-decoration: none !important; color: #bb4370; opacity: 0.2; -webkit-transition: 3s; -moz-transition: 3s; -o-transition: 3s; -ms-transition: 3s; }
来源：https://stackoverflow.com/questions/28181055/display-inline-block-image-link-with-horizontal-scroll