ズーム時の背景色カット

こんにちは皆、私はコーディング時に新しく、私のナビゲーションバーに少し助けが必要です私は私のCSSで "white-space：nowrap;"私のナビゲーションバーの折り返しを避けるため、ズームしたページで背景色をカットした後、右にスクロールするとズーム時の背景色カット

私の背景色を完全に右に置くことができますか？またはアドバイスを歓迎します！は

マイHTML

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8"> 
    <title>Conférence des directeurs des écoles doctorales de droit</title> 
    <link rel="stylesheet" href="css/master.css"> 
    </head> 
    <body> 
     <nav><ul> 
     <li><a href="#">Présentation</li> 
     <li><a href="#">Liste des ED</li> 
     <li><a href="#">Documents</li> 
     <li><a href="#">Liens</li> 
     <li><a href="#">Infomations/IP</li> 
     <li><input id=search-button type="submit" name="search_button"> 
      <input id=search-box type="text" name="search_box" placeholder="Rechercher..."></li> 
     </ul></nav> 

    </body> 
</html>

私のCSSありがとう

@font-face { 
    font-family: "Quicksand Light Regular"; 
    src: url('quicksand_light-webfont.woff'); 
} 

nav { 
    position: absolute; 
    background-color: darkred; 
    top: 0; 
    right: 0; 
    left: 0; 
    white-space: nowrap; 
    text-align: center; 
    max-width: 100%; 
    zoom: 1; 
} 

nav li { 
    font-family: "Quicksand Light Regular"; 
    font-weight: bold; 
    display: inline-block; 
    margin-right: 45px; 

} 

a { 
    color: white; 
    text-decoration: none; 
}

出典

2017-02-25 Cornos

'nav 'の' max-width'を '100％'以上にして、' navで追加された '45px右マージン 'を補うli ' – mike510a

' overflow' CSS属性を試してみる必要があるかもしれません。 – mike510a

'max-width：330％;同じ問題ですが、'オーバーフロー：自動; 'を追加したときスクロールバーが機能しましたナビゲーションバーとページの下部にない – Cornos

誰かが私のための解決策を見つけた私はright : 0; を削除し、すべての人のためにmin-width:100%; Thxをを追加する必要がありました

nav { 
background-color: darkred; 
position: absolute; 
top: 0; 
left: 0; 
min-width: 100%; 
white-space: nowrap; 
text-align: center;

}

出典

2017-02-25 19:24:45 Cornos

CSSルールnavのmax-width: 100%からwidth: 100%に変更する

出典

2017-02-25 14:08:31 Johannes

"幅：100％"私は最大幅と思ったのでそれを戻すことを忘れちょうど：100％解決策を解決します – Cornos

そして、助けてください？あなたはそれを削除しようとすることができます "ズーム：1" - それはとにかく多くの意味をしません... – Johannes

また、 'オーバーフロー - xを追加してみてください：'ナビ 'に表示 – Johannes

代わりにフレキシブルボックスを使用してみてください。

自動的に任意のサイズのスペースに収まるflexboxesを作成するために、単純なdiv要素を使用してulとliを使用してからの変更以下の例（例を参照）

EDIT

変更HTML：

削除されたULおよびLIタグ
は、<div id="menu">で<UL>を交換して<LI>を置き換え、変更CSSのちょうど<div>

リスト属性：min-width: 100%

に変更

max-width: 100%が#menu
にnavに改名（#menuための2つの新しいルールを追加しました1つはフレックスボックス用、もう1つは古いものに置き換えてnavルールは）
はmargin-leftとmargin-right属性に置き換えることnav div divからnav div divルールmargin-right: 45pxを削除
にnav liルールの名前を変更しました。

@font-face { 
 
    font-family: "Quicksand Light Regular"; 
 
    src: url('quicksand_light-webfont.woff'); 
 
} 
 

 
#menu { 
 
    position: absolute; 
 
    background-color: darkred; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    white-space: nowrap; 
 
    text-align: center; 
 
    zoom: 1; 
 
    min-width: 100%; // notice I changed max-width to min-width 
 
} 
 

 
#menu { 
 
    display: flex; 
 
    flex-direction: horizontal; 
 
    justify-content: space-between; 
 
    align-items: stretch; 
 
    flex-wrap: nowrap; 
 
} 
 

 
nav div div { 
 
    font-family: "Quicksand Light Regular"; 
 
    font-weight: bold; 
 
    margin-right: 15px; 
 
    margin-left: 15px; 
 
} 
 

 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Conférence des directeurs des écoles doctorales de droit</title> 
 
    <link rel="stylesheet" href="css/master.css"> 
 
</head> 
 

 
<body> 
 
    <br> 
 
    <nav> 
 
    <div id="menu"> 
 
     <div><a href="#">Présentation</div> 
 
     <div><a href="#">Liste des ED</div> 
 
     <div><a href="#">Documents</div> 
 
     <div><a href="#">Liens</div> 
 
     <div><a href="#">Infomations/IP</div> 
 
     <div><input id=search-button type="submit" name="search_button"> 
 
      <input id=search-box type="text" name="search_box" placeholder="Rechercher..."></div> 
 
     </div></nav> 
 

 
    </body> 
 
</html>

出典

2017-02-25 14:35:45 mike510a

** Run Snippetをクリックしてフルページビューを見てください。** – mike510a

フレックスのアイデアはとても面白いです。私はこの問題があったの主な理由は、私は1つの行に私のnavをしたいのでです私は別のセクションでflexboxを使用することを好む – Cornos

'flex-wrap：wrap'を' flex-wrap：nowrap'に変更するだけです – mike510a

mike510a @ありがとうございますが、私は別の魔女をfindink それに直面していないことができますので、問題の解決策を見つけたい、本当に便利されていますくださいこれは、例えば：

> <!DOCTYPE html> <html> <head> 
>  <meta charset="utf-8"> 
>  <title>Test</title> 
>  <link rel="stylesheet" href="css.css"> </head> <body> 
>  <nav> 
>  <ul> 
>   <li>test1</li> 
>   <li>test2</li> 
>   <li>test3</li> 
>   <li>test4</li> 
>   <li>test5</li> 
>   <li>test6</li> 
>   <li>test7</li> 
>   <li>test8</li> 
>   <li>test9</li> 
>   <li>test10</li> 
>  </ul> 
>  </nav> 
> 
> </body> </html>

そして、cs S：私は同じ問題を抱えている

> nav { position: absolute; background-color: blue; width: 100%; 
> text-align: center; white-space: nowrap; } li { display: 
> inline-block; }

...

出典

2017-02-25 15:19:01 Cornos

ズーム時の背景色カット

答えて

関連する問題