我用其他解决方案阅读了不同的人,但没有回答我的奇怪问题。正如您在链接上观察到的那样,绿色文本(#scroller
)是绝对位置并且具有top: 173px;
要查看它与文本的其余部分对齐,我需要将顶部元素放置到top:167px
。所以它有 6px 的差异。我该怎么做才能解决这个问题?疯了...
.HTML:
<div class="wrapper">
<ul id="scroller">
<li>Sustainable</li>
<li>Eye Catching</li>
<li>Modern Design</li>
<li>Retail & Pop-Up</li>
<li>Sports-themed</li>
<li>Event Space</li>
<li>Bar/Restaurant</li>
<li>Urban Living</li>
</ul>
<q>
<span class="q-line"><strong>CEPODS</strong> are <!-- Retail & Pop-Up --><span class="word-mask"></span> Environments.</span>
<span class="q-line">We repurpose Shipping Containers.</span>
<span class="q-line lower"><strong>CEPODS</strong></span>
<span class="q-line lower">...Container Evolution<span class="registered">®</span></span>
</q>
<header>
<nav>
<a href="index.php">
<h1 class="sprites-logo-cepods ir">cepods</h1>
</a>
<ul class="main-nav">
<li>
<a href="about.php">about</a>
</li>
<li>
<a href="how-we-work.php">how we work</a>
</li>
<li class="dropli">
<a href="design.php">design<i class="icon-right-open-gal"></i></a>
<ul class="sub-nav">
<li>
<a href="design-bar.php">bar</a>
</li>
<li>
<a href="design-retail-space.php">retail space</a>
</li>
<li>
<a href="design-restaurant.php">restaurant</a>
</li>
<li>
<a href="design-event-service.php">event service</a>
</li>
<li>
<a href="design-living.php">living</a>
</li>
<li>
<a href="design-custom.php">custom</a>
</li>
</ul>
</li>
<li>
<a href="news.php">news</a>
</li>
<li>
<a href="faq.php">faq</a>
</li>
</ul>
</nav>
</header>
</div><!-- End wrapper -->
.CSS:
#scroller {
height: 50px;
list-style-type: none;
overflow: hidden;
margin: 0;
position: absolute;
top: 173px;
left: 207px;
z-index: 1;
font-family: helvetica-neue, helvetica, sans-serif;
text-transform: uppercase;
font-size: 34px;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
@media #{$ipad-l}{
left: 220px;
}
@media #{$ipad-p}{
left: 150px;
top: 175px;
height: 25px;
font-size: 22px;
}
li{
height: 50px;
text-align: center;
width: 305px;
color:#08E700;
@media #{$ipad-p}{
width: 210px;
}
}
}
只需修复 2 个 css 问题。
#scroller li {
color: #08E700;
height: 41px; /* <-- this height was not right, (previous 50) should be same has background line height */
text-align: center;
width: 305px;
}
#scroller {
font-family: helvetica-neue,helvetica,sans-serif;
font-size: 34px;
height: 41px; /* <-- this height was not right, (previous 50) should be same has background line height */
left: 207px;
list-style-type: none;
margin: 0;
overflow: hidden;
position: absolute;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
text-transform: uppercase;
top: 167px; /* <-- this was : 173px */
z-index: 1;
}