cari

Rumah  >  Soal Jawab  >  teks badan

Kelas baris CSS menjadikan elemen tertentu terkeluar daripada bingkai, manakala ia harus statik dan ditetapkan pada bahagian bawah paparan

Halaman semasa saya kelihatan seperti ini. Selepas menambah kelas baris supaya kedua-dua elemen bersebelahan antara satu sama lain, bar navigasi bawah ditolak ke tempat saya perlu menatal.

Di sini anda boleh melihat halaman lain tanpa elemen baris, di mana pautan navigasi tersangkut dengan sempurna di bahagian bawah paparan (tumbuhan dan elemen navigasi bilik tidak sepatutnya berada dalam tab peringatan (imej 1), jadi abaikan elemen ini Imej 2) Halaman ini boleh ditatal dan mengekalkan bar navigasi saya pada kedudukan yang betul, tetapi garis besar elemen tidak betul. Semua paparan kotak hijau hendaklah berada di atas satu sama lain, bersama-sama dengan butang edit dan padam. Saya cuba membetulkannya menggunakan kelas baris yang digunakan untuk Rajah 1, tetapi ini mengakibatkan isu dalam Rajah 1.

Di sini anda boleh melihat perkara yang saya mahu capai dalam tab Peringatan

Saya tertanya-tanya apa yang salah dengan kod css semasa saya yang menyebabkan ralat ini apabila terdapat elemen baris dalam html saya.

Jika anda mengetahui cara yang lebih baik untuk memaparkan item bersebelahan antara satu sama lain yang menghalang tingkah laku ini, anda juga dialu-alukan. 

.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;
  }

Coretan kod html yang menyebabkan masalah

{% 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 %}

Jika masalahnya terletak di tempat lain, saya akan memasukkan keseluruhan halaman html bersama kod css navigasi. Peringatan 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 %}

Navigasi 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粉156415696P粉156415696224 hari yang lalu366

membalas semua(1)saya akan balas

  • P粉905144514

    P粉9051445142024-04-04 10:11:30

    Meletakkan keseluruhan kandungan ke dalam div (seperti di bawah dengan 90% lebar) menyelesaikan keseluruhan masalah: 

    .div-2 {
      margin: auto;
      width: 90%;
      height: 90%;
 }

    balas
    0
  • Batalbalas