0

作業中の Web サイトで問題が発生しています。これはここのウェブサイトです。上部のナビゲーション バーは、モバイル/タブレット ビューでは適切ではありません。デスクトップだけでもOKです。モバイル ビューの画像を参照してください。

レスポンシブにしたくありませんが、モバイルまたはタブレットからは、スクロールと同じレイアウトにする必要があります。ナビ用コードには問題ありません。問題は、ナビゲーションを保持する div に関するものです。ナビゲーションを削除してテキストのみを使用すると、同じ問題が発生するためです。

div の HTML コード:

<div class="outer top">
    <div class="inner">
        <div class="nav">
            <ul>
                <li>....</li>
                <li>....</li>
                <li>....</li>
            </ul>
        </div>
    </div>
</div>

CSS コード:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

body {
    background: url(../images/bg.png) repeat-x #fff;
    color: #fff;
    font-family: Helvetica, Myriad Pro, Verdana;
    font-size: 14px;
    line-height: 1em;
}

.outer {
    width: 100%;
    float: right;
    display: block;
}

.top {
    background: #004481;    
}

.inner {
    width: 940px;
margin: 0 auto;
}

幅 100% を使用しました。しかし、それでもモバイル/タブレットでは大丈夫ではありません。どなたか解決策を教えてください...

4

2 に答える 2

0

あなたのコードを jsbin に入れましたが、あなたが見ているものを見ることができませんでした。コードを追加できますか？

http://jsbin.com/ologix/1/edit

于 2013-03-12T14:00:10.950 に答える
0

モバイル/タブレット デバイス専用の新しいスタイルシートを作成することも検討できます。これにより、すべてのデバイスで正しく表示されるようになります。すでに Div を使用しているため、問題にはなりません。

于 2013-03-12T14:21:46.320 に答える