Bagaimana untuk memusatkan borang/jadual dengan set medan dalam HTML-CSS dan memastikan saiznya konsisten?
P粉316110779
P粉316110779 2023-09-16 11:49:52
0
1
1376

Dalam HTML digubah menggunakan <form><table>. Ia kelihatan seperti ini:

<form ...>
 <table>
   <tr>
    <td></td>
    <td></td>
   </tr>
   ...
   <tr>
    <td></td>
    <td></td>
   </tr>
 </table>
</form>

Untuk meletakkan borang/jadual ini di tengah-tengah halaman, anda boleh menggunakan yang berikut CSS:

table {
   margin: 0px auto;
}

Sumber:

  • Jajarkan tengah jadual HTML

Sehingga semuanya okay.

hendaklah ke arah <form>中添加<fieldset>legend时,实际上是添加到了<table>. Oleh itu, struktur semasa adalah seperti berikut:

<form ...>
<fieldset>
<legend>一些描述...</legend>
 <table>
   <tr>
    <td></td>
    <td></td>
   </tr>
   ...
   <tr>
    <td></td>
    <td></td>
   </tr>
 </table>
</fieldset>
</form>

Dua situasi berlaku di sini:

  1. Bagaimana untuk membuat sempadan <fieldset> sama saiz dengan bentuk/meja itu sendiri?

Permohonan adalah seperti berikut:

fieldset {
     display: inline-block;
}

Sumber:

  • Adakah terdapat cara untuk menjadikan set medan hanya seluas kawalan di dalamnya?

Walaupun ia berfungsi seperti yang diharapkan, <table>masih di sebelah kiri.

Soalan

  • Bagaimana untuk meletakkan borang/jadual dengan set medan di tengah sambil mengekalkan saiz set medan sama dengan borang/jadual?

P粉316110779
P粉316110779

membalas semua(1)
P粉561323975

Perkara sedemikian?

form {
    display: table;
    margin: 0 auto;
}
table {
   margin: 0 auto;
}
fieldset {
   display: inline-block;
}
<form>
  <fieldset>
    <legend>一些描述...</legend>
    <table>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </table>
  </fieldset>
</form>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan