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

私は完全にレスポンシブなウェブサイトを作ろうとしていますが、今助けが必要です. 画像を見てください。ブラウザ ウィンドウのサイズを小さくすると、「タブ」が 2 行目に移動し、見栄えが悪くなります。それらを1行にとどまらせるにはどうすればよいですか?

4

3 に答える 3

1

あなたがしていることは、レスポンシブ Web サイトではないと思います。

レスポンシブ レイアウトを作成するための最初のステップは、対応したい解像度を計画することです。一般的な解像度には、320pxスマートフォンの768px縦幅、タブレットの縦幅、タブレットの横幅が含まれ1024pxます。

レスポンシブ Web サイトを作成するには、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) { 

}

レスポンシブ Web サイトを作成する方法を段階的に学ぶことができます。

EDIT : を追加したところwidth: 20%;、.htabs li各liタグを回避できるようになりました。さらに、ブラウザのサイズに応じて font-size を小さくしたり大きくしたりしてください。したがって、各メディアクエリに次の命令を入れて、ブラウザのサイズに合わせてフォントサイズを変更してみてください。

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

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

これを避けるには、高さと幅を指定してメニューバーを要素にラップする必要があります。overflow:hiddenまた、このラッパーに属性を追加する必要があります。

于 2013-10-26T19:40:16.090 に答える
1

「%」および「em、rem」属性の代わりに「px」を使用している場合は、レスポンシブ デザインのパディングまたは幅に % または「em」を使用する必要があります。

于 2013-10-26T20:02:19.893 に答える