CSS - Float：离开同一条线

Question

.htabs { /* horizontal tabs */
    display: table;
}

.htabs li { /* horizontal tab */
    position: relative;
    float: left;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAMklEQVQIW2M8e3r/fw4OdgZk8OPHTwbGq5eP/QcxYJIwNlgCpBokAAIwBfglsBqFy3IAqdosZ0m+BQ8AAAAASUVORK5CYII=);
    border-left: 1px solid #e1dfd2;
    border-top: 1px solid #e1dfd2;
    border-right: 1px solid #e1dfd2;
    margin-right: 1px;
    display: table-row;
}

.htabs li a { /* horizontal tab link */
    position: relative;
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #444444 !important;
    text-shadow: -1px -1px rgba(229,227,215,1), 1px 1px rgba(229,227,215,1);
    z-index: 1;
    padding: 0 7px;
    line-height: 30px; 
}

我正在努力建立一个完全响应的网站，现在我需要一些帮助。看一下图片，当我将浏览器窗口调整为较小的尺寸时 - “标签”正在移动到第二行看起来很糟糕。我怎么能强迫他们留在一条线上？

Answer 1

您应该将菜单栏包装到指定高度和宽度的元素中以避免这种情况。此外，您应该将overflow:hidden属性添加到此包装器。

Answer 2

您使用的是“px”而不是“％”和“em，rem”属性，您应该在响应式设计中使用％或“em”作为填充或宽度，

Answer 3

我会说你正在做的事情不是响应网站！

创建响应式布局的第一步是规划出您想要满足的分辨率。常见的解决方案包括智能手机的320px纵向宽度，平板电脑的纵向宽度768px，平板电脑的横向宽度1024px。

要创建自适应网站，您应该使用Media queries。例如，

@media screen and (max-width: 960px) {      
    #content {
        margin: 0 20px 0 0;
    }
}

在这种情况下，您必须确定要在不同设计中显示的屏幕大小。

@media screen and (max-width: 960px) { 


@media screen and (max-width: 758px) { 


}

@media screen and (max-width: 524px) { 

}

您可以了解如何Create a responsive website step by step

编辑：我刚刚将width: 20%;添加到.htabs li这使得每个li标记都可以被推卸。此外，您应该根据浏览器大小将font-size更改为越来越大。因此，只需在每个媒体查询中添加以下指令，并尝试修改字体大小以适合浏览器大小。

.htabs li { /* horizontal tab */
    width: 20%;
    ....
}

.htabs li a {
    font-size: 10px;
}