合計幅がウィンドウを超えた場合に特定のオブジェクトのオーバーフローを隠す方法（CSSのみ？）

モバイルデバイスやデスクトップデバイス用のナビゲーションバーをスタイリングするとき、アイテムの1つのオーバーフローを隠そうとしています）ナビゲーションバー内のすべての項目の合計幅がウィンドウの幅を超える場合。たとえば、ナビゲーションバーの幅の合計が400ピクセルで、ビューポートの幅が350ピクセルの場合、タイトルから離れたすべてのアイテムの幅が設定されたままになり、タイトルのオーバーフローが隠されます。問題の項目はそうのように、リストの真ん中にある：合計幅がウィンドウを超えた場合に特定のオブジェクトのオーバーフローを隠す方法（CSSのみ？）

<html> 
    <div class="navbar"> 
     <ul> 
      <li id="linkHome"><a href="/home">Home</a></li> 
      <li id="pageName"><span>Title</span></li> 
      <li id="logOut"><a href="/logout">LOGOUT</a></li> 
     </ul> 
    </div> 
</html>

とスタイルに、私が使用している現在のCSSがこれです：

.navbar ul { 
    white-space: nowrap; 
    list-style-type: none; 
    margin: 0 auto; 
    padding: 0; 
    overflow: hidden; 
    background-color: #000000; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 999; 
} 

.navbar li { 
    float: left; 
} 

.navbar li a { 
    width: auto; 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

.navbar li span { 
    max-width: 35px; 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    overflow: hidden;; 
}

もう一つは、私はあまりしたくありませんJavaScriptを使用しているので、CSSのみのソリューションがあれば、それがはるかに望ましいでしょう！あなたはCSSの@mediaを使用することができます

出典

2017-03-07 Sam Drew

使用メディアクエリー –

、ありがとう！ –

upvote私のために下にしてください –

は、ここに

@media (max-width:767px){ 
    .class-name { 
    width: 50% !important; 
    } 
}

の最大幅は、あなたが最小幅で最大幅を変更し、その値を調整することができ、このCSSは上適用されます最大画面幅である例であります必要に応じて

出典

2017-03-07 10:35:52

使用偉大な作品@lakhvirkumarメディアクエリー@media all and (max-width: 500px){ //css goes here}

出典

2017-03-07 10:46:07

合計幅がウィンドウを超えた場合に特定のオブジェクトのオーバーフローを隠す方法（CSSのみ？）

答えて

関連する問題