Προτεινόμενα Κύρια Μαθήματα:

Πώς να δημιουργήσεις: Δεσμά μενού με ίσο πλάτος

Δημιουργία ευελιξίας στην κατεύθυνση του μενού καθοδήγησης

Πρώτη Βήμα - Προσθήκη HTML：

<!-- Μενού καθοδήγησης -->
<div class="navbar">
  <a class="active" href="#">Εισαγωγή</a>
  <a href="#">Αναζήτηση</a>
  <a href="#">Επικοινωνία</a>
  <a href="#">Σύνδεση</a>
</div>

Δεύτερη Βήμα - Προσθήκη CSS：

/* Ρύθμιση του στυλ του μενού καθοδήγησης */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}
/* Στυλ δεσμών καθοδήγησης */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* Τέσσερα δεσμά ίσου πλάτους. Αν έχεις δύο δεσμούς, χρησιμοποίησε 50%，για τρεις δεσμούς, χρησιμοποίησε 33.33%，κ.λπ. */
  text-align: center; /* Αν θέλεις να εξουδετερώσεις το κείμενο στο κέντρο If you want the text to be centered */
}
/* Προσθήκη χρώματος υποβάθρου όταν ο χρήστης τοποθετεί τον δάκτυλο πάνω στο δεσμό */
.navbar a:hover {
  background-color: #000;
}
/* Ρύθμιση του στυλ του δεσμού του τρέχοντος/ενεργού */
.navbar a.active {
  background-color: #04AA6D;
}
/* Προσθήκη ευελιξίας - Σε οθόνες μικρότερες από 500 εκατοστά, τα δεσμά καθοδήγησης θα εμφανίζονται σαν να είναι στοιχεία, όχι παράλληλα */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* Αν θέλεις να εξουδετερώσεις την αριστερή σειρά του κειμένου στη μικρή οθόνη */
  }
}

Δοκιμάστε το προσωπικά

Σχετικές σελίδες

Εκμάθηση:CSS Ναυτιλιακή μπάρα