Question

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

在将窗口大小调整为320px时，我的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;
}

Answer 1

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

其他方面是设置以下css属性，然后在移动设备上再试一次：

white-space:nowrap;

在移动设备上将随机换行添加到H2

1 个答案: