Das HTML-Eingabe-Tag verschiebt CSS-Gitternetzlinien unerwartet
P粉513318114
P粉513318114 2023-09-14 00:31:55
0
2
494

Um mein Problem zu vereinfachen, nehmen wir an, ich habe ein 2x2-CSS-Raster-Div. Ich habe eine Rastervorlage verwendet, um die Größe von 3 Divs (Klassennamen: „btn“, „title“ und „info“) innerhalb dieser 4 Zellen zu ändern, wie im Codeausschnitt unten gezeigt. (Fügen Sie 2 Spalten in der 2. Zeile zusammen, um die 3. Div-Klasse = „Info“ beizubehalten)

Das erste Div (class="btn") hat ein Seitenverhältnis von 1/1. Also stelle ich einfach die Höhe auf 10 VH ein und es wird ein Quadrat.

Meine Frage

Das Problem ist das „input“-Tag im letzten div class="info". Wenn ich kein Tag eingebe, funktioniert alles wie erwartet. Die mittlere Gitterlinie respektiert den Mindestinhalt der ersten Spalte (wie er in Grid-Template-Columns festgelegt ist) und bleibt an der Position ganz links.

Aber wenn ich dieses Eingabe-Tag im letzten Div verwende, verschiebt es die Rastermittellinie unerwartet! Dies ist unerwartet, da die zweite Reihe des Rasters genügend Platz bietet und meiner Meinung nach nicht verschoben werden sollte.

Um das Problem zu sehen, entfernen Sie einfach das Eingabe-Tag aus dem Code-Snippet unten und sehen Sie den Unterschied.

div.contain {
  display: grid;
  grid-template-rows: fit-content(20%) 45%;
  grid-template-columns: min-content auto;
  grid-template-areas:
        "btn title"
        "info info";
  gap: 10px;
}

.btn {
   grid-area: btn;
   aspect-ratio: 1 / 1;
   height: 10vh;
   border: 1px solid;
   
}

.title {
   grid-area: title; 
   border: 1px solid;
}

.info {
  border: 1px solid;
  grid-area: info;
}
<div class="contain">
  <div class="btn">Btn</div>
  <div class="title">Title</div>
  <div class="info">
    Normal Text
    <div>another div</div>
    <input>
  </div>  
</div>

P粉513318114
P粉513318114

Antworte allen(2)
P粉600845163

只需将 align-self: start 添加到 info

div.contain {
  display: grid;
  grid-template-rows: fit-content(20%) 45%;
  grid-template-columns: min-content auto;
  grid-template-areas:
        "btn title"
        "info info";
  gap: 10px;
}

.btn {
   grid-area: btn;
   aspect-ratio: 1 / 1;
   height: 10vh;
   border: 1px solid;
   
}

.title {
   grid-area: title; 
   border: 1px solid;
}

.info {
  border: 1px solid;
  grid-area: info;
  align-self: start; 
  padding:2px
}
<div class="contain">
  <div class="btn">Btn</div>
  <div class="title">Title</div>
  <div class="info">
    Normal Text
    <div>another div</div>
    <input>
  </div>  
</div>
P粉289775043

我找到了答案,

应设置输入标记宽度值。我将其设置为任意百分比并且效果很好

input {
  width: 50%;
}
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!