Dalam HTML, tengah satu elemen dan kanan/kiri jajarkan elemen flexbox lain-html tutorial-php.cn

Dalam HTML, tengah satu elemen dan kanan/kiri jajarkan elemen flexbox lain

WBOY

Lepaskan： 2023-09-04 10:25:06

ke hadapan

1154 orang telah melayarinya

Dalam HTML, tengah satu elemen dan kanan/kiri jajarkan elemen flexbox lain

Katakan kita mempunyai P, Q,R,S,T yang dijajarkan di tengah-tengah halaman web −

                                P Q R S T

Salin selepas log masuk

Kami mahu perkara di atas kekal sama, kecuali yang paling kanan iaitu T bergerak ke kanan, seperti ini −

                                 P Q R S                                 T

Salin selepas log masuk

Sekarang mari kita lihat beberapa contoh untuk melaksanakan perkara yang kita lihat di atas.

Jariskan ke tengah satu dan kanan/kiri elemen kotak flex lain dengan jidar automatik

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Susun atur di atas boleh dicapai pada halaman web dengan menggunakan margin automatik dan item flex tidak kelihatan baharu −

<html>
<title>Example</title>
<head>
   <style>
      li:first-child {
         margin-right: auto;
         visibility: hidden;
      }
      li:last-child {
         margin-left: auto;
         background: orange;
      }
      ul {
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
      }
      li {
         display: flex;
         margin: 3px;
         padding: 10px;
         background: red;
      }
      p {
         text-align: center;
         margin-top: 0;
      }
   </style>
<head>
<body>
   <ul>
      <li>T</li>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
   </ul>
</body>
<html>

Salin selepas log masuk

Jariskan satu dan kanan/kiri elemen kotak flex lain dengan elemen pseudo

Dalam contoh ini, kita akan menggunakan unsur pseudo dengan lebar yang sama dengan T. Gunakan ::sebelum meletakkannya di permulaan bekas.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Mari kita lihat contoh sekarang−

<html>
<title>Example</title>
<head>
   <style>
      ul::before {
         content: "T";
         margin: 1px auto 1px 1px;
         visibility: hidden;
         padding: 5px;
         background: orange;
      }
      li:last-child {
         margin-left: auto;
         background: orange;
      }
      ul {
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
      }
      li {
         display: flex;
         margin: 3px;
         padding: 10px;
         background: red;
      }
   </style>
<head>
<body>
   <ul>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
   </ul>
</body>
<html>

Salin selepas log masuk

Jariskan satu lagi dan kanan/kiri elemen kotak flex yang lain dengan Tata Letak Grid

Dalam contoh ini, buat grid dengan berbilang lajur Kemudian letakkan item anda di lajur tengah dan hujung.

<html>
<title>Example</title>
<head>
   <style>
      ul {
         display: grid;
         grid-template-columns: 1fr repeat(4, auto) 1fr;
         grid-column-gap: 5px;
         justify-items: center;
      }
      li:nth-child(1) {
         grid-column-start: 2;
      }
      li:nth-child(5) {
         margin-left: auto;
      }
      ul {
         padding: 0;
         margin: 0;
         list-style: none;
      }
      li {
         padding: 10px;
         background: red;
      }
      p {
         text-align: center;
      }
   </style>
<head>
<body>
   <ul>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
   </ul>
</body>
<html>

Salin selepas log masuk

Atas ialah kandungan terperinci Dalam HTML, tengah satu elemen dan kanan/kiri jajarkan elemen flexbox lain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!