0

我正在开发一个包含信息栏（在移动设备上为 100% 宽度）的 UI，其中包含用于发送消息的标题和图标。这两个元素都是浮动的，但在移动设备（Android/iPhone）上查看网站时，它会将标题分成两行。尽管有足够的空间将其保持在一行，但它仍然可以。

将窗口大小调整为 320 像素时，我的 Mac 上没有同样的问题。

任何想法？ 

.page_layout .page-head .info-bar {
    height: 60px;
    width: 100%;
}

.page_layout .page-head .info-bar h2 {
    float: left;
    font-size: 28px;
    font-weight: 500;
    color: #333;
    padding: 0;
    margin: 2px 0 0 5px;
}

.page_layout .page-head .info-bar .connect-icon {
    width: 40px;
    height: 40px;
    float: right;
    background-color: #A2AB58;
    margin-right: 1px;
    text-align: center;
    padding-top: 8px;
    cursor: pointer;
}
4

1 回答 1

2

您可以尝试在 h2 中添加 1px 黑色边框，以查看是否真的有足够的空间，或者某些边距/填充是否在窃取您一些 px。

另一件事是设置以下 css 属性，然后在移动设备上重试：

white-space:nowrap;
于 2013-09-03T11:03:19.843 回答