Question

我正在编写一个网络应用程序，并且在将内容扩展到iPhone尺寸方面遇到了一些麻烦。我已经设置了按钮：

<div class="form_divs" id="metal_buttons">
    <button class="btn" id="btn-bronze" name="bronze" type="button">Bronze</button>
    <button class="btn" id="btn-silver" name="silver" type="button">Silver</button>
    <button class="btn" id="btn-gold" name="gold" type="button">Gold</button>
</div>

使用float:left CSS 属性，产生所需的外观（所有按钮并排，无空格）

fiddle 1

#metal_buttons {
    height: 40px;
    margin-right: 4%;
    margin-left: 4%;
    white-space: nowrap;
}

.btn {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
    width: 33%;
    height: 100%;
    float: left;
}

但是在我的iPhone上，这会导致按钮换行到下一行。

如果删除float: left属性，该行不再包装，但我的按钮之间有空格：

fiddle 2

#metal_buttons {
    height: 40px;
    margin-right: 4%;
    margin-left: 4%;
    white-space: nowrap;
}

.btn {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
    width: 33%;
    height: 100%;
}

如何防止这些按钮在小屏幕上进行换行（例如按比例缩小），我可以做些什么来控制第一小提琴的行为（按钮之间没有间距）？

Answer 1

对于你应该放置的移动外观

@media (max-width: 767px) {
  #your mobile css goes here
}

因此，您可以使用相同名称的不同风格在移动设备和其他平台上看起来不错

你可以去 @media 了解更多信息

漂浮物和小屏幕的麻烦

1 个答案: