尝试显示一组图像,带有overflow-x的内联块可以水平滚动,但图像不是内联显示的,我不能让它们在没有向左浮动的情况下正确显示。我不确定我做错了什么 - 我尝试创建set block div并绕过每个链接并且它们显示为内联但是只要我将它们编码为链接,它们就不再是内联的。我正在使用此示例:http://jsfiddle.net/evqt871L/来检查我的代码,但无法弄清楚它为什么不起作用。
显示:
<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>
示例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; }