css - CSS-浮点数:在同一行上

.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;
}

我正在尝试建立一个响应迅速的网站，现在我需要一些帮助。看图片，当我将浏览器窗口调整为较小的尺寸时，“标签”移到第二行，看起来很糟糕。我如何强迫他们呆在一条线上？

最佳答案

我想说的是，您正在做的不是响应式网站！

创建响应式布局的第一步是计划要满足的分辨率。常见分辨率包括智能手机的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标签都可以被忽略。此外，您应根据浏览器大小将字体大小更改为越来越小。因此，只需在每个媒体查询中输入以下说明，然后尝试修改字体大小以适合浏览器大小。

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

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

关于css - CSS-浮点数:在同一行上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19610979/