Positionieren von Formularelementen und deren Beschriftungen in Zeile

So positionieren Sie Eingabeformularelemente mit ihren Beschriftungen wie folgt, aber nicht mit Tabelle? Beschriftungen sollten über Eingabeelementen zentriert sein, und Blöcke in der Zeile sollten innerhalb des äußeren Blocks zentriert sein.Positionieren von Formularelementen und deren Beschriftungen in Zeile

+----------------------------------------------+ 
|  label1  label2  label3  | 
| [..........] [..........] [..........] | 
+----------------------------------------------+

Es könnte 1, 2, 3 oder mehr Elemente in derselben Zeile geben.

habe ich versucht, dies:

.outer{text-align:center;} 
 
    .inner{float:left;}

<form> 
 
     <div class="outer"> 
 
     <div class="inner"> 
 
      <label for="l1">label1</label><br><input id="l1" name="label1"> 
 
     </div> 
 
     <div class="inner"> 
 
      <label for="l2">label2</label><br><input id="l2" name="label2"> 
 
     </div> 
 
     <div class="inner"> 
 
      <label for="l3">label3</label><br><input id="l3" name="label3"> 
 
     </div> 
 
     </div> 
 
    </form>

Quelle

2016-08-01 sbrbot

Es wird erwartet, dass Sie zumindest versuchen, dies für sich selbst zu programmieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben und warum es nicht funktioniert hat. –

könnten Sie mindestens eine HTML-Struktur veröffentlichen? –

Als @Paulie_D Benachrichtigung ist es notwendig, Ihren ausprobierten Code zu platzieren .. und recherchieren Sie dazu ..., Das wird Ihnen somit eine Erfahrung von etwas Neues lernen .. Danke! – vignesh

Platz sie in der gleichen div und in der Mitte den Text in diesem div:

.wrapper { 
 
    text-align:center; 
 
} 
 

 
.wrapper * { 
 
    text-align:left; 
 
} 
 

 
.okay { 
 
    display:inline-block; 
 
} 
 

 
.okay p { 
 
    text-align:center; 
 
}

<div class="wrapper"> 
 
<div class="okay"> 
 
    <p>text</p> 
 
    <input type='text'> 
 
</div> 
 
<div class="okay"> 
 
    <p>text</p> 
 
    <input type='text'> 
 
</div> 
 
<div class="okay"> 
 
    <p>text</p> 
 
    <input type='text'> 
 
</div> 
 
</div>

Quelle

2016-08-01 13:27:37 Randy

@sbrbot Jetzt ist es. Zentrieren Sie die Elemente in Ihrem übergeordneten Element, und richten Sie sie dann im untergeordneten Element nach links aus. In diesem Fall ist body das übergeordnete Element, Sie können jedoch stattdessen jedes Element verwenden. – Randy

Diese drei inneren Blöcke sind hier nicht in der äußeren zentriert, das ist es was ich gerne hätte. – sbrbot

Das war es jetzt. BTW was BODY * (dieses Sternchen) bedeuten? – sbrbot

Es s auch möglich durch Bootstrap-Framework auch .. die macht reagiert

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
    <style> 

    </style> 
</head> 
<body> 
    <form> 
    <div class="col-md-4 text-center"> 
      <div class="form-group"> 
      <label for="label1">label</label> 
      <input type="text" class="form-control" id="label1" placeholder="labeltext"> 
     </div> 
    </div> 
    <div class="col-md-4 text-center"> 
     <div class="form-group"> 
      <label for="label2">label</label> 
      <input type="text" class="form-control" id="label2" placeholder="labeltext"> 
     </div> 
    </div> 
    <div class="col-md-4 text-center"> 
     <div class="form-group"> 
      <label for="label2">label</label> 
      <input type="password" class="form-control" id="label2" placeholder="labeltext"> 
     </div> 
    </div> 
</form> 
</body> 
</html>

Quelle

2016-08-01 13:32:42 vignesh

Nein, das ist es nicht. https://jsfiddle.net/sbrbot/opd5tLu2/ – sbrbot

Positionieren von Formularelementen und deren Beschriftungen in Zeile

Antwort

Verwandte Themen