Bagaimana untuk menetapkan jarak antara elemen bar navigasi dalam Vue

Vue.js ialah rangka kerja JavaScript yang popular untuk mencipta aplikasi satu halaman. Satu komponen biasa ialah bar navigasi, yang sering digunakan untuk navigasi utama tapak web dan termasuk item menu yang dipautkan ke pelbagai halaman. Dalam Vue, bar navigasi terdiri daripada satu siri elemen, yang boleh mempunyai jeda Artikel ini akan memperkenalkan cara untuk menetapkan selang antara elemen bar navigasi dalam Vue.

1. Gunakan margin

Menggunakan margin ialah cara paling mudah untuk menetapkan jarak. Anda boleh melaraskan jarak antara elemen dengan mudah dengan menambahkan margin di antaranya. Dalam Vue, gunakan gaya mengikat untuk menambah margin pada setiap elemen dalam bar navigasi anda. Sebagai contoh, coretan kod berikut akan menambah 10 piksel margin antara empat pautan:

<template>
  <div class="navbar">
    <a href="#" class="nav-item">Home</a>
    <a href="#" class="nav-item">About</a>
    <a href="#" class="nav-item">Services</a>
    <a href="#" class="nav-item">Contact</a>
  </div>
</template>

<style>
.navbar {
  display: flex;
  justify-content: space-between;
}

.nav-item {
  margin-right: 10px;
}
</style>

Dalam kod di atas, kelas .navbar ditetapkan untuk melentur supaya elemen anaknya sejajar dan Gunakan justify-content property untuk mengagihkannya secara sama rata. Kelas .nav-item ditetapkan kepada margin-right:10px untuk menambah margin kanan 10 piksel antara setiap pautan navigasi.

2. Gunakan padding

Jika anda ingin menjadikan bar navigasi lebih hierarki, anda boleh menggunakan padding dalam elemen. Tidak seperti jidar, yang melaraskan jarak antara elemen, pelapik mencipta ruang putih di sekeliling elemen. Begini cara untuk mencipta jarak navbar menggunakan padding:

<template>
  <div class="navbar">
    <a href="#" class="nav-item">Home</a>
    <a href="#" class="nav-item">About</a>
    <a href="#" class="nav-item">Services</a>
    <a href="#" class="nav-item">Contact</a>
  </div>
</template>

<style>
.navbar {
  display: flex;
  justify-content: space-between;
}

.nav-item {
  padding-left: 10px;
  padding-right: 10px;
}
</style>

Dalam kod di atas, kelas .navbar dan .nav-item adalah sama seperti dalam contoh di atas, satu-satunya perbezaan ialah penggunaan atribut padding dalam Tambahkan 10 piksel padding ke kiri dan kanan setiap pautan navigasi.

3. Gunakan flexbox

Flexbox ialah alat yang berkuasa untuk mencipta reka letak penyesuaian. Menggunakan flexbox, anda boleh mengawal jarak antara elemen dengan mudah, serta menunjukkan dan menyembunyikan elemen navigasi pada peranti yang berbeza. Begini caranya untuk menetapkan jarak navbar melalui flexbox:

<template>
  <div class="navbar">
    <a href="#" class="nav-item">Home</a>
    <a href="#" class="nav-item">About</a>
    <a href="#" class="nav-item">Services</a>
    <a href="#" class="nav-item">Contact</a>
  </div>
</template>

<style>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  flex-grow: 1;
  text-align: center;
}

.nav-item:not(:last-child) {
  margin-right: 10px;
}
</style>

Dalam kod di atas, kelas .navbar disediakan untuk menggunakan flexbox dan menggunakan sifat justify-content untuk menjadikannya sekata merentas semua elemen dalam navbar Pengedaran kosong. Sifat item jajar memusatkan elemen secara menegak. Kelas item nav ditetapkan kepada flex-grow:1 (mengisi semua ruang yang ada) supaya ia mengisi ruang mendatar bar navigasi. Pemilih :not(:last-child) digunakan untuk menambah jidar kanan 10 piksel antara setiap elemen kecuali elemen terakhir.

Kesimpulan

Di atas adalah beberapa kaedah yang biasa digunakan Anda boleh memilih kaedah yang paling sesuai mengikut keperluan anda. Kami amat mengesyorkan agar anda mengikuti prinsip reka bentuk responsif apabila menetapkan jarak antara elemen bar navigasi untuk memberikan tapak anda pengalaman pengguna yang terbaik merentas peranti dan skrin yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan jarak antara elemen bar navigasi dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!