0

我在使用移动网站时遇到问题。客户想要底部的这些基于文本的按钮/链接，所以我添加了它们，但我对使用大小百分比有点生疏。

我需要使看起来像这样并保持在同一行，但要相应地拉伸，这样文本就不会太小而无法阅读。
我可以让它在三星或 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 &copy; </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;
}
4

2 回答 2

1

您的字体大小设置为 100%，因此当您挤压窗口时它会变小。将其更改为 22px 或其他内容，然后它将保持不变。

于 2013-08-12T17:58:41.893 回答
1

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

于 2013-08-12T20:21:02.477 回答