1

在此处输入图像描述

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

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

4

3 回答 3

1

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

于 2013-10-26T19:40:16.090 回答
1

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

于 2013-10-26T20:02:19.893 回答
1

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

创建响应式布局的第一步是计划好要满足的分辨率。常见的分辨率包括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) { 

}

您可以逐步学习如何创建响应式网站

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

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

.htabs li a {
    font-size: 10px;
}
于 2013-10-26T20:06:32.680 回答