0

私は Web 開発の初心者であり、まだ CSS の境界を学んでいます。Google 検索がまだ役に立たなかったことが 1 つ見つかりました。

ページ全体に伸ばしたいナビゲーション バーがあり、バー内の各アイテム間のパディング サイズ/間隔は同じです。もちろん、ユーザーがウィンドウのサイズを変更すると、それに応じてパディングのサイズが増減します。私の nav コンテナはページの幅の 100% ですが、サイトのロゴのために道を空けるために、nav 自体は 200px 右に移動されています (margin-left)。ウェブサイトの自動幅の 20% (6 つの項目があり、その間に 5 つの空白があるため) を計算することで、パディングを正確に保つことができると考えました。これは可能ですか？Javascript でできることは見てきましたが、まだ JS を学んでおらず、このサイトの締め切りが迫っているので、その方法は避けたいと思っています。助けてくれてありがとう！

4

2 に答える 2

0

実際のコード サンプルがないと、何をしようとしているのかを正確に知ることは困難ですが、説明に基づいて問題を再現/修正するための最善の試みを以下に示します。

http://jsfiddle.net/EK8tL/

HTML:

<div class="container">
    <div id="title"></div>
    <ul id="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

CSS:

.container {
    display: table;
    width: 100%;
    height: 100px;
}

#title {
    width: 160px;
    height: inherit;
    display:table-cell;
    background-color:blue;
}

#nav {
    list-style: none;
    height: inherit;
    margin: 0;
    padding: 0;
}

#nav li {
    width: 20%;
    height: inherit;
    background-color: pink;
    float: left;
    margin: 0;

}

display: table を使用すると、javascript を使用するか、まったく別の場所に配置する方が (おそらく) 良い場合に、残りのスペースを使用することから逃れることができます。

私が提供した例では、タイトル div は同じサイズのままで、nav はその右側の残りのスペースを埋めるようにスケーリングされます。もちろん、このようにすると、li の幅 % をリスト項目の数に合わせて手動で変更する必要があります。

これがあなたが探していたものではない場合は申し訳ありませんが、あなたの説明から判断するのは難しいです.

于 2013-09-06T02:21:00.943 に答える