0

我正在编写一个网络应用程序，并且在将内容缩放到 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属性，产生所需的外观（所有按钮并排，没有空格）

小提琴 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属性，则该行不再换行，但我的按钮之间有空格：

小提琴 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%;
}

我能做些什么来获得第一个小提琴的行为（按钮之间没有间距），同时防止这些按钮在小屏幕上换行（例如，通过缩小）？

4

1 回答 1

1

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

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

所以你可以有不同的风格，同名，在移动和其他平台上都好看

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

于 2013-04-12T15:34:07.677 回答