我在使用移动网站时遇到问题。客户想要这些基于文本的按钮/链接在底部,所以我添加了它们,但我对使用大小百分比有点生疏。
我需要使外观看起来像这样并保持在同一行上,但相应地拉伸(stretch)以使文本不会太小而无法阅读。
我可以让它在三星或 Nexus 上看起来和工作正常,但使用 iPhone 总是导致第三个文本元素移动到下一行而不是缩小。
手机网站:http://teetimelawn.com/m/html/index.html
编辑(显示我的问题的 iphone 模拟器的屏幕截图):
http://i.imgur.com/R0RE0i5.png
它在 Android 手机上的典型外观就像一个联系: http://i.imgur.com/tkpLv4V.jpg
HTML:
<section id="footer">
<div id="footer">
<div id="full"><a href="http://www.teetimelawncare.com">Full Site</a></div>
<div id="foot"><a href="tel:18156096969">Call Us</a></div>
<div id="footer-right">Tee Time Lawn Care © </div>
</div>
</section> <!-- #footer -->
CSS:
#footer {
color: #fff;
font-size: 100%;
line-height: 45px;
font-weight: bold;
text-transform: uppercase;
background:#00CC00;
line-height: 18px;
text-align: center;
height: 30px;
}
#foot {
font-size: 100%;
background-color: purple;
display: inline-block;
padding-left: 10%;
padding-right: 10%;
height: 30px;
}
#full {
font-size: 100%;
float: left;
margin-left: 20px;
}
#footer-right {
font-size: 100%;
float: right;
margin-right: 20px;
}
最佳答案
HTML 有很多问题。首先,你有两个ids
;只有一个应该在场。其次,full、foot、footer-right 的 div 应该是一个列表项。确实没有理由需要它们是 ids
。如果你想为中间做一个特殊的颜色,给它一个类。
<ul class="footer">
<li><a href="http://www.teetimelawncare.com">Full Site</a></li>
<li class="purple"><a href="tel:18156096969">Call Us</a></li>
<li><span>Tee Time Lawn Care ©</span></li>
</ul>
然后你可以使用 text-justify 来对齐 lis。查看此 CodePen 以获取更多信息:http://codepen.io/anon/pen/djoah
关于移动网站上的 HTML/CSS 页脚在 iPhone safari 上不起作用如何修复?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18193268/