简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
La classe de lignes CSS fait sortir certains éléments du cadre, alors qu'ils devraient être statiques et fixés au bas de l'écran.
P粉156415696
P粉156415696 2024-04-03 18:48:12
0
1
284

Ma page actuelle ressemble à ceci. Après avoir ajouté la classe de lignes afin que les deux éléments soient côte à côte, la barre de navigation inférieure est poussée vers le bas jusqu'à l'endroit où je dois faire défiler.

Ici vous pouvez voir une autre page sans éléments de ligne, où les liens de navigation sont parfaitement collés en bas de l'affichage (les éléments de navigation des plantes et des pièces ne doivent pas être dans l'onglet de rappel (image 1), donc ignorez cet élément Image 2) La page peut défiler et maintient ma barre de navigation dans la bonne position, mais le contour de l'élément est incorrect. Tous les affichages de la boîte verte doivent être superposés, ainsi que les boutons de modification et de suppression. J'ai essayé de résoudre ce problème en utilisant la classe de lignes utilisée pour la figure 1, mais cela a entraîné le problème de la figure 1.

Ici, vous pouvez voir ce que je veux réaliser dans l'onglet Rappels

Je me demande quel est le problème avec mon code CSS actuel qui provoque cette erreur lorsqu'il y a un élément de ligne dans mon code HTML.

Si vous connaissez une meilleure façon d'afficher les éléments les uns à côté des autres qui empêche ce comportement, vous êtes également le bienvenu. 

.row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #bdbdbd;
    font-family: 'Montserrat', sans-serif;
  }

  .CheckButton {
    margin-left: 30px;
    width: 60px;
    height: 80px;
  }

  .ReminderDescription {
    flex-grow: 1;
    font-weight: bold;
    margin-right: 80px;
  }

L'extrait de code HTML à l'origine du problème

{% block content %}
  {% for reminderInstance in Reminders %}
  <div class="row">
    <div class="CheckButton">
      <form action="{{ url_for('reminder', Plant_id = reminderInstance.Plant_id) }}">
        <button class="NewButton NewButton1"></button>
      </form>
    </div>
    <div class="ReminderDescription "> Give {{ reminderInstance.Plant_name }} water {{ reminderInstance.TimeSinceWaterNeeded }} days ago </div>
  </div>
  {% endfor %}
{% endblock %}

Si le problème réside ailleurs, j'inclurai la page html entière ainsi que le code CSS de navigation. Rappel HTML

<!DOCTYPE html>
<html>
    <head>
        <title> Reminders </title>
        <meta name="viewport" content="width=devide-width, initial-scale=1.0">
        <meta charset="utf-8">
        <link rel="shortcut icon" href="/assets/favicon.ico">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='src/nav.css') }}">
        <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='src/Collection.css') }}">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav class="nav">
          <a href="{{ url_for('collection') }}" class="nav__link">
            <span class="nav__text">Collection</span>
          </a>
          <a href="{{ url_for('index') }}" class="nav__link">
            <span class="nav__text">Home</span>
          </a>
          <a href="{{ url_for('reminders') }}" class="nav__link nav__link--active">
            <span class="nav__text">Reminders</span>
          </a>
        </nav>
    </body>
</html>

{% block content %}
  {% for reminderInstance in Reminders %}
  <div class="row">
    <div class="CheckButton ">
      <form action="{{ url_for('reminder', Plant_id = reminderInstance.Plant_id) }}">
        <button class="NewButton NewButton1"></button>
      </form>
    </div>
    <div class="ReminderDescription "> Give {{ reminderInstance.Plant_name }} water {{ reminderInstance.TimeSinceWaterNeeded }} days ago </div>
  </div>
  {% endfor %}
{% endblock %}

Navigation CSS

body {
    margin: 0 0 55px 0;
}

.nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: #4ea662;
    display: flex;
    overflow-x: auto;
}

.nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 50px;
    overflow: hidden;
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease-in-out;
}

.nav__link:hover {
    background-color: #eeeeee;
}

.nav__link--active {
    padding: 2px 4px;
    border: none;
    text-align: center;
    border-radius:5px;
    background-color: #468454;
    color: #ffffff;
}

P粉156415696
P粉156415696

répondre à tous(1)
P粉905144514
P粉9051445142024-04-04 10:11:30 1 plancher

Mettre l'intégralité du contenu dans un div (comme ci-dessous avec une largeur de 90 %) a résolu tout le problème : 

.div-2 {
      margin: auto;
      width: 90%;
      height: 90%;
 }
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！