Wie zentriere ich ein Formular/eine Tabelle mit Feldsätzen in HTML-CSS und halte die Größe konsistent?
P粉316110779
P粉316110779 2023-09-16 11:49:52
0
1
1337

In HTML, erstellt mit <form><table>. Es sieht so aus:

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

Um dieses Formular/diese Tabelle in der Mitte der Seite zu platzieren, können Sie Folgendes verwenden CSS:

table {
   margin: 0px auto;
}

Quelle:

  • HTML-Tabelle zentrieren

Bis alles in Ordnung ist.

sollte in Richtung <form>中添加<fieldset>legend时,实际上是添加到了<table> sein. Daher ist die aktuelle Struktur wie folgt:

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

Hier treten zwei Situationen auf:

  1. Wie kann der Rand von <fieldset> auf die gleiche Größe wie das Formular/die Tabelle selbst gebracht werden?

Die Bewerbung läuft wie folgt ab:

fieldset {
     display: inline-block;
}

Quelle:

  • Gibt es eine Möglichkeit, den Feldsatz nur so breit zu machen wie die darin enthaltenen Steuerelemente?

Obwohl es wie erwartet funktioniert, <table>ist es immer noch auf der linken Seite.

Frage

  • Wie platziere ich ein Formular/eine Tabelle mit einem Feldsatz in der Mitte, während der Feldsatz die gleiche Größe wie das Formular/die Tabelle beibehält?

P粉316110779
P粉316110779

Antworte allen(1)
P粉561323975

这样的东西吗?

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>
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!