Bagaimana untuk mengalih keluar ruang antara elemen blok sebaris?-html tutorial-php.cn

Bagaimana untuk mengalih keluar ruang antara elemen blok sebaris?

PHPz

Lepaskan： 2023-09-22 22:25:02

ke hadapan

1384 orang telah melayarinya

Bagaimana untuk mengalih keluar ruang antara elemen blok sebaris?

Kami boleh mengalih keluar ruang antara elemen blok sebaris dengan mudah. Sebelum meneruskan, mari kita buat dokumen HTML dahulu dan tambahkan elemen blok sebaris dengan ruang -

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements</title>
   <style>
      li {
         display: inline-block;
         width: 150px;
         font-size: 18px;
      }
      li:nth-child(1) {
         background: green;
         color: white;
      }
      li:nth-child(2) {
         background: orange;
         color: black;
      }
      li:nth-child(3) {
         background: blue;
         color: white;
      }
      li:nth-child(4) {
         background: red;
         color: black;
      }
   </style>
</head>
<body>
   <h1>Free Tutorials</h1>
   <p>We have the following tutorials right now:</p>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>Machine Learning</li>
      <li>Automation</li>
   </ul>
</body>
</html>

Salin selepas log masuk

Sekarang mari lihat beberapa contoh mengalih keluar ruang antara elemen blok sebaris -

Alih keluar ruang antara elemen blok sebaris

Kita boleh mengalih keluar ruang antara elemen blok sebaris dengan menyusun item senarai tidak tertib dalam satu baris -

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements</title>
   <style>
      li {
         display: inline-block;
         width: 150px;
         font-size: 18px;
      }
      li:nth-child(1) {
         background: green;
         color: white;
      }
      li:nth-child(2) {
         background: orange;
         color: black;
      }
      li:nth-child(3) {
         background: blue;
         color: white;
      }
      li:nth-child(4) {
         background: red;
         color: black;
      }
   </style>
</head>
<body>
   <h1>Free Tutorials</h1>
   <p>We have the following tutorials right now:</p>
   <ul>
      <li>Java</li><li>Python</li><li>Machine Learning</li><li>Automation</li>
   </ul>
</body>
</html>

Salin selepas log masuk

Alih keluar ruang antara elemen blok sebaris dengan melangkau tag penutup

Kami juga boleh mengalih keluar ruang dengan melangkau tag kategori -

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements</title>
   <style>
      li {
         display: inline-block;
         width: 150px;
         font-size: 18px;
      }
      li:nth-child(1) {
         background: green;
         color: white;
      }
      li:nth-child(2) {
         background: orange;
         color: black;
      }
      li:nth-child(3) {
         background: blue;
         color: white;
      }
      li:nth-child(4) {
         background: red;
         color: black;
      }
   </style>
</head>
<body>
   <h1>Free Tutorials</h1>
   <p>We have the following tutorials right now:</p>
   <ul>
      <li>Java
      <li>Python
      <li>Machine Learning
      <li>Automation
   </ul>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar ruang antara elemen blok sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!