Wie Abstand zwischen einer horizontalen und vertikalen Seitenleiste setzen

Hallo Leute, vielen Dank im Voraus für die Hilfe und Unterstützung!Wie Abstand zwischen einer horizontalen und vertikalen Seitenleiste setzen

Ich lerne zu programmieren und entschuldige mich im Voraus für die grundlegende Frage. Ich mache eine Webseite, die speziell dafür verwendet wird, Code zu lernen. Ich habe zwei Seitenleisten implementiert, aber sie überlappen sich, wodurch die obere Leiste nach rechts geschoben wird. Wie kann ich das korrigieren? Der Code ist wie folgt.

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 99% 
 
    } 
 
    ul.vertical { 
 
    list=-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
\t overflow: auto; 
 
\t background-color: #333; 
 
\t width: 200px; 
 
\t position: fixed; 
 
\t } 
 
    li.sidebar { 
 
    text-align: center; 
 
    border-bottom: 1px solid #555; 
 
    } 
 

 
    li:last-child { 
 
\t border-right: none; 
 
\t border-bottom: none; 
 
    } 
 
    li a{ 
 
\t display: block; 
 
\t color: white; 
 
\t padding: 14px 16px 
 
\t text-align center; 
 
\t text-decoration: none; 
 
\t font-size: 20px; 
 
\t 
 
    } 
 
    li a:hover:not(.active) { 
 
\t background-color: #111; 
 
    } 
 
    .active { 
 
    \t background-color: #4CAF50; 
 

 
    }

<ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li style="float:right"><a class="active" href="#about">About</a></li> 
 
     <li style="float:right"><a href="#search">search</a></li> 
 
     <li style="float:left"><a href="#login">Login</a></li> 
 
    <li style="float:left"><a href="#register">Register</a></li> 
 
    </ul> 
 
    <ul class="vertical"> 
 
    <li><a class="active" href="#zero">zero</a></li> 
 
    <li style=" sidebar float:right"><a class="active" href="#one">one</a></li> 
 
     <li style=" sidebar float:right"><a href="#two">two</a></li> 
 
     <li style=" sidebar float:left"><a href="#three">three</a></li> 
 
    <li style="sidebar float:left"><a href="#four">four</a></li> 
 
    </ul>

Quelle

2017-07-12 Verkai

können Sie zeichnen, was Sie brauchen? auch style = "sidebar float: right" sollte man die sidebar vom style entfernen –

Du solltest uns auf jeden Fall ein Bild zeigen oder eine bessere Beschreibung geben was du versuchst zu tun. Es ist wirklich unklar, wie die Frage derzeit geschrieben wird. * "Ich habe zwei Seitenleisten implementiert, aber sie überlappen sich, wodurch die obere Leiste nach rechts geschoben wird. Wie kann ich das korrigieren?" * Wie Sie "korrigieren", hängt davon ab, was Sie stattdessen tun möchten, und Sie haben das nicht erwähnt . https://stackoverflow.com/help/how-to-ask –

Ihr Code-Snippet zeigt nicht das Problem, das Sie beschreiben. –

Ich bin froh, dass Ihr um Hilfe zu erreichen, kann es manchmal verwirrend sein. Aber es wird einfacher, wenn du weitermachst. Zunächst einmal sind einige Ihrer CSS-Eigenschaften falsch geschrieben. Ich bemerke drei Fehler markiert unten ...

ul.vertical { 
    list=-style-type: none; 
} 

ul { 
    padding 0; 
} 

li a { 
    padding: 14px 16px 
    text-align center; 
}

Die zweiten beiden fehlen Doppelpunkt, sowie ein Semikolon. Und die erste hat ein zusätzliches Gleichheitszeichen in der Eigenschaft. Sie sollten Ihren Code wirklich so strukturieren, dass er optimal zum Lesen und Suchen von Fehlern geeignet ist. Ich habe bemerkt, dass Ihr Abstand sehr inkonsistent ist. Sie haben auch Styles in Ihr HTML-Dokument eingefügt, was eine schlechte Angewohnheit ist, wenn Sie bereits ein externes Stylesheet verwenden.

Um Abstände zwischen zwei divs hinzuzufügen, können Sie die margin -Eigenschaft sowohl für die erste als auch die zweite Seitenleistenauswahlklasse verwenden. Ich werde ein Beispiel hinzufügen, mit dem Sie den Code kopieren und studieren können.

// html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Sidebars</title> 
    <link rel="stylesheet" href="styles.css"> 
    </head> 
    <body> 

     <div class="sidebar1"> 
     <ul> 
      <li>About</li> 
      <li>Search</li> 
      <li>Login</li> 
      <li>Register</li> 
     </ul> 
     </div> 

     <div class="sidebar2"> 
     <ul> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
      <li>Four</li> 
     </ul> 
     </div> 

    </body> 
</html>

// css

.sidebar1 { 
    float: left; 
    width: 100px; 
    height: 200px; 
    margin: 0 5px 0 0; 
    background-color: grey; 
} 

.sidebar2 { 
    float: left; 
    width: 100px; 
    height: 200px; 
    margin: 0 0 0 5px; 
    background-color: lightgrey; 
} 

ul { 
    margin: 0; 
}

Wie Sie ich 4 Stellen sehen kann meine Ränder hinzugefügt, diese vier Ziffern von links nach rechts gehen oben rechts-Bottom links. So können Sie sehen, dass ich 5px Marge rechts für die erste Seitenleiste und 5px links für die zweite hinzugefügt habe. Für eine Gesamtsumme von 10px Padding.

Ich hoffte, das hat Ihnen geholfen, und gab Ihnen ein gutes Beispiel für ordentlich und ordentlich Code. :)

Quelle

2017-07-13 02:08:15

Wie Abstand zwischen einer horizontalen und vertikalen Seitenleiste setzen

Antwort

Verwandte Themen