CSSがウィンドウの変更を最小限に抑える

Question

私のメニューに問題があります。ブラウザのウィンドウサイズを変更すると、メニューが水平から垂直に変化します。ウィンドウ内にテキストを静的にするオプションはありますか？私はウィンドウのサイズを変更してもメニューが同じ状態を維持したい。ここに私のコードは次のとおりです。

nav { 
 
    position: absolute; 
 
    margin-top: 288px; 
 
    margin-left: 378px; 
 
    height: 25px; 
 
    z-index: 2; 
 
} 
 

 
nav>ul>li { 
 
    font-size: 20px; 
 
    color: white; 
 
    padding: 10px 40px; 
 
    display: inline-block; 
 
    z-index: 2; 
 
} 
 

 
nav>ul>li>a { 
 
    text-decoration: none; 
 
    color: rgba(0, 0, 0, 0.35); 
 
    transition: all linear 0.15s; 
 
} 
 

 
nav>ul>.current-item>a { 
 
    background-color: rgba(0, 0, 0, 0.35); 
 
    text-align: center; 
 
    color: white; 
 
    padding: 3px 22px; 
 
    border-radius: 10px; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 50px; 
 
    height: 28px; 
 
    z-index: 2; 
 
    text-decoration: none; 
 
} 
 

 
nav>ul>li:hover>a { 
 
    background-color: rgba(0, 0, 0, 0.35); 
 
    text-align: center; 
 
    color: white; 
 
    padding: 3px 22px; 
 
    border-radius: 10px; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 50px; 
 
    height: 28px; 
 
    z-index: 2; 
 
}

<nav> 
 
    <ul> 
 
    <li class="current-item"><a href="index.php"> HOME </a></li> 
 
    <li><a href="profile.php">PROFILE</a></li> 
 
    <li><a href="contact.php">CONTACT</a></li> 
 
    </ul> 
 
</nav>

Answer 1

あなたは以下の例のように、あなたのnavプロパティにwhite-space: nowrap;を追加することができます。

nav { 
    position: absolute; 
    margin-top: 288px; 
    margin-left: 378px; 
    height: 25px; 
    z-index: 2; 
    white-space: nowrap; 
} 

それを行うには他の方法カップル：

• 01にdisplay: inline-blockを追加プロパティ。
• navプロパティ（例：width: 650px;またはmin-width:650px;のようなもの）内のナビゲーションメニューの長さにマジックナンバー（定義された番号）を設定して、ブラウザがそれに影響を与えないようにします。このオプションは、通常、良い習慣とはみなされませんが、プロジェクトのニーズに応じて見過ごされる可能性があります。

Answer 2

ここでは、コードに基づいた解決策を示します。

https://jsfiddle.net/pablodarde/zmh7tyj6/

nav { 
    position: absolute; 
    margin-top: 288px; 
    margin-left: 378px; 
    height: 25px; 
    z-index: 2; 
} 

nav>ul { 
    display: table; 
    margin: 0 auto; 
    padding: 0; 
    max-width: 650px; 
} 

nav>ul>li { 
    display: table-cell; 
    position: relative; 
    width: 100%; 
    max-width: 100px; 
    font-size: 20px; 
    color: white; 
    padding: 10px 40px; 
} 

nav>ul>li>a { 
    text-decoration: none; 
    color: rgba(0, 0, 0, 0.35); 
    transition: all linear 0.15s; 
} 

nav>ul>.current-item>a { 
    background-color: rgba(0, 0, 0, 0.35); 
    text-align: center; 
    color: white; 
    padding: 3px 22px; 
    border-radius: 10px; 
    border: none; 
    cursor: pointer; 
    width: 100%; 
    max-width: 50px; 
    height: 28px; 
    z-index: 2; 
    text-decoration: none; 
} 

nav>ul>li:hover>a { 
    background-color: rgba(0, 0, 0, 0.35); 
    text-align: center; 
    color: white; 
    padding: 3px 22px; 
    border-radius: 10px; 
    border: none; 
    cursor: pointer; 
    width: 100%; 
    max-width: 50px; 
    height: 28px; 
    z-index: 2; 
} 

しかし、私は、はるかにエレガントなそのようなことをお勧めします。

https://jsfiddle.net/pablodarde/tenueqe6/

Answer 3

使用最小幅例えばNAVにおける最小幅：12OOpx。

Answer 4

nav { 
    float:right; // float is cleaner 
    width: 650px; // set to your values 
    min-width: 650px; // set to your values 
    height: 25px; 
    z-index: 2; 
} 

デモ：

nav { 
 
    float:right; 
 
    width: 650px; 
 
    min-width: 650px; 
 
    height: 25px; 
 
    z-index: 2; 
 
} 
 

 
nav>ul>li { 
 
    font-size: 20px; 
 
    color: white; 
 
    padding: 10px 40px; 
 
    display: inline-block; 
 
    z-index: 2; 
 
} 
 

 
nav>ul>li>a { 
 
    text-decoration: none; 
 
    color: rgba(0, 0, 0, 0.35); 
 
    transition: all linear 0.15s; 
 
} 
 

 
nav>ul>.current-item>a { 
 
    background-color: rgba(0, 0, 0, 0.35); 
 
    text-align: center; 
 
    color: white; 
 
    padding: 3px 22px; 
 
    border-radius: 10px; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 50px; 
 
    height: 28px; 
 
    z-index: 2; 
 
    text-decoration: none; 
 
} 
 

 
nav>ul>li:hover>a { 
 
    background-color: rgba(0, 0, 0, 0.35); 
 
    text-align: center; 
 
    color: white; 
 
    padding: 3px 22px; 
 
    border-radius: 10px; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 50px; 
 
    height: 28px; 
 
    z-index: 2; 
 
}

<nav> 
 
    <ul> 
 
    <li class="current-item"><a href="index.php"> HOME </a></li> 
 
    <li><a href="profile.php">PROFILE</a></li> 
 
    <li><a href="contact.php">CONTACT</a></li> 
 
    </ul> 
 
</nav>

これを行うには、いくつかの方法があります。最終的にはwidth:を定義する必要があります。また、position: absolute;は通常このようなものには必要ありません。 margin:も同様に浮かびます。