Wie Halten Sie Nav-Leiste nicht verschieben, wenn das Fenster in der Größe verändert

Ich bin neu in html/css. Mein problem ist, wenn ich die Größe meines Browserfenster der text der nav-bar verschiebt/kondensiert entsprechend der Größe des Fensters und verzerrt wird. Ich möchte, dass es statisch bleiben, so dass, wenn ich meine schmalen browser-Fenster müsste ich haben, um zu Blättern über das Recht in der Lage sein zu sehen, dass der text wieder. Ich bin mit bootstrap auch.

Dies ist mein code:

HTML

<body>
  <div class="nav">
    <div class="container">
      <ul class="pull-right">
        <li><a href="#">HOME</a></li>
        <li><a href="#">WINES</a></li>
        <li><a href="#">GRAPES</a></li>
        <li><a href="#">ABOUT US</a></li>
      </ul>
    </div>
  </div>
</body>

CSS

.nav li {
  display: inline;
}

.nav a {
  color: #5a5a5a;
  font-size: 20px;
  font-weight: bold;
  padding: 14px 10px;
}

.nav {
  position: absolute;
  top: 20px;
  right: 0px;
}

Versuchte ich mit .container {width: 900px;} aber das hat nicht geholfen. Der nav-Leiste immer noch nicht, bleiben statisch.

InformationsquelleAutor Johnz | 2015-05-12
  1. 1

    Können Sie dies lösen, indem hinzufügen eine min-width für die navbar.

     navigation {        
    margin-right: auto;    
    margin-left: auto;    
    max-width: 100%;    
    min-width: 1000px;
}
    InformationsquelleAutor bright
  2. 0

    Können Sie dies lösen, indem hinzufügen eine minimale Breite, um ein div rund um die nav bar.

    In Ihrem Fall wäre es in der .nav class

    .nav {
   min-width:165px;
   position: absolute;
   top: 20px;
   right: 0px;
}

    Ich weiß nicht, ob Sie gemeinsam alle den code mit uns, aber aus dem code, den Sie zur Verfügung gestellt 165px sollte in Ordnung sein für die minimale Breite. Wenn es mehr code vorhanden ist, dass macht die navbar eine andere Breite, dann müssen Sie möglicherweise zum anpassen der pixel-Höhe der min-width:.

    InformationsquelleAutor Charlie
  3. -1

    Sollte diese Arbeit

    ul {
  white-space: nowrap;
}
    • Ich versuchte dies und es funktionierte nicht, und es gibt keine Erklärung hier.
    InformationsquelleAutor tojowe
Schreibe einen Kommentar