0

私は現在、モバイル Web サイトに取り組んでおり、そのフッターでいくつかの助けを借りることができます。

これがどのように見えるかのイメージです：

http://i.stack.imgur.com/alH8M.jpg

次のものが必要です。

1）幅はさまざまなモバイルデバイスで機能する必要があるため、固定できません

2) ホームの左側とニュースレターの右側の余白は等しくなければなりません

3) デバイスの幅がフッターを 1 行で表示するのに十分な大きさでない場合は、リンクを複数の「行」で表示する必要があります。私が言おうとしているのは、水平スクロールがあってはならないということです

私は何年もの間いじっていて、それを機能させることができません。開始するための基本的なコードを次に示します。

<nav>
    <ul>
        <li><a href="">Unternehmen</a></li>
        <li><a href="">Kompetenz</a></li>
        <li><a href="">Produkte</a></li>
        <li><a href="">Partner</a></li>
        <li><a href="">News</a></li>
    </ul>
</nav>

私を助けることができる人に前もって感謝します!

4

5 に答える 5

3 
nav { background: #016d9b; }
nav ul { text-align: center; padding: 0; }
nav ul li { display: inline-block; border-right: 1px solid white; padding: 0 10px; margin: 10px 0; }
nav ul li:last-child { border-right: none }
nav ul li a { color: white; text-decoration: none; }

ulテキストを中央に配置し、liインライン ブロックとして表示します。

これは対処すべきだと思います。

于 2012-05-17T12:40:53.490 に答える
0 
nav{width:100%; display:block;}
nav ul{padding:0px; margin:0px;}
nav ul li{ width:20%; float:left;}
于 2012-05-17T12:34:03.363 に答える
0

これを試して

nav ul { list-style-type:none; margin:0; padding:0; }
nav ul li { float:left; padding-left:10px; margin-right:10px; border-left:1px solid #fff; }
nav ul li:first-child { margin-right:0 !important; }
nav ul li a { color:#fff; }
于 2012-05-17T12:35:55.860 に答える
0

これがあなたを助けるかどうかはわかりません....

しかし、私はいくつかの仕事をしました。複数の「行」で表示されるウィンドウのサイズを変更できます。

ここjsfiddle： http://jsfiddle.net/thilakar/XM2qU/1/

于 2012-05-17T12:36:11.903 に答える
0

現在の HTML 構造に、CSS を設定して、提供された画像のレプリカを作成できます。

この実用的なフィドルの例を参照してください!

HTML

<nav>
    <ul>
        <li><a href="#" title="">Unternehmen</a></li>
        <li><a href="#" title="">Kompetenz</a></li>
        <li><a href="#" title="">Produkte</a></li>
        <li><a href="#" title="">Partner</a></li>
        <li><a href="#" title="">News</a></li>
    </ul>
</nav>

CSS

body {
    margin: 0;
    padding: 0;
}
nav {
    width: 100%;
    background-color: blue;
    text-align: center;
}
ul {
    list-style-type: none;
    padding: 12px 0;
    width: auto;
    margin: 0 auto;
    display: block;
}
li {
    display: inline-block;
    margin: 0;
    padding: 0;
}
a {
    color: #FFF;
    border-left: 1px solid #FFF;
    text-decoration: none;
    font-family: sans-serif;
    padding: 0 8px;
    font-size: 12px;
    line-height: 17px;
}
li:first-child a {
    border-left: 0 none;
}
a:hover {
    text-decoration: underline;
}

プレビュー:

ここに画像の説明を入力

提案されている内容を理解するのに役立ついくつかの関連リンク:

CSS 表示プロパティ

CSS リスト

CSS パディング

CSS チュートリアル、CSS の学習

于 2012-05-17T12:48:37.747 に答える