So richten Sie mein Etikett und Eingabefeld aus

Ich möchte mein Eingabefeld "title" direkt unter den Radiobuttons rendern, aber jetzt ist es zu weit nach links. Ich brauche das extra div, weil es ein dynamisches Formular ist, aber ich möchte die Rasteransicht. Wie kann ich das erreichen?So richten Sie mein Etikett und Eingabefeld aus

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link href= 
 
      "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" 
 
      rel="stylesheet" type="text/css"> 
 
    <style> 
 
     textarea { 
 
     height: 600px !important width: 500 px !important 
 
     } 
 
     .inline {display: inline-block;} 
 
    </style> 
 
    <title></title> 
 
    </head> 
 
    <body> 
 
    <form accept-charset="UTF-8" action= 
 
      "http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" 
 
      class="ui form formular" enctype="multipart/form-data" id="formular" 
 
      method="post" name="formular"> 
 
     <span class="ui two column grid"></span> 
 
     <div class="row"> 
 
     <span class="ui two column grid"></span> 
 
     <div class="two wide column"> 
 
      <span class="ui two column grid"></span> 
 
      <div class="field"> 
 
      <span class= 
 
        "ui two column grid"><label>Category</label></span> 
 
      </div><span class="ui two column grid"></span> 
 
     </div> 
 
     <div class="column field"> 
 
      <span class="ui two column grid"></span> 
 
      <div class="inline field" id="type_container"> 
 
      <span class="ui two column grid"><input name="type" type= 
 
                "radio" value="s"> <label>A</label> <input name="type" 
 
                           style="margin-left: 25px;" type="radio" value="k"> 
 
       <label>B</label></span> 
 
      </div><span class="ui two column grid"></span> 
 
     </div> 
 
     </div> 
 
     <div class="maintext" id="category_contents" style="display: block;"> 
 
     <span class="ui two column grid"></span> 
 
     <div class="row"> 
 
      <span class="ui two column grid"></span> 
 
      <div class="two wide column inline"> 
 
      <span class="ui two column grid"></span> 
 
      <div class="field"> 
 
       <span class= 
 
        "ui two column grid"><label>Title</label></span> 
 
      </div><span class="ui two column grid"></span> 
 
      </div> 
 
      <div class="column field inline"> 
 
      <span class="ui two column grid"><input name="title" 
 
                placeholder="Title" type="text"></span> 
 
      </div><span class="ui two column grid"></span> 
 
      <div class="two wide column"> 
 
      <span class="ui two column grid"></span> 
 
      <div class="field"> 
 
       <span class= 
 
        "ui two column grid"><label>Text</label></span> 
 
      </div><span class="ui two column grid"></span> 
 
      </div> 
 
      <div class="column field"> 
 
      <span class="ui two column grid"><input name="data" 
 
                placeholder="Test" type="text"></span> 
 
      </div><span class="ui two column grid"></span> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </body> 
 
</html>

Ich mag den Raum zwischen dem Titel Etikett und dem Titel Eingabefeld erhöhen. Wie kann ich es tun?

Quelle

2016-07-18 Niklas Rosencrantz

Ich weiß nicht genau, ob dies das ist, was Sie wollen, aber haben Sie versucht, 'padding-right: 15px' zu' .ui.form .field> label '? – Maharkus

@Maharkus Aber wenn ich das mache, wird das Zoomen nicht funktionieren. –

@Programmer 400: SemanticUI - Auch awesome Rahmen Es hat Haufen Optionen, es ist mein Vorschlag nicht angenommen, ein anderes Framework und versuchen, es herauszufinden Problem. Was Sie bekommen. Ich werde dir helfen. –

Ich hatte Ihr HTML-Formular überprüft es hat einige unerwünschte Spalten. Jetzt habe ich das Formular aktualisiert und ich habe zwei Demos erstellt und ich habe Formularelemente und Rasterlayout für zwei Spalten verwendet.

Semantic-UI Grundform:

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/> 
 
<div class="example"> 
 
    <h4 class="ui header">Semantic UI Form</h4> 
 
    <form class="ui form"> 
 
     <div class="field"> 
 
     <label>First Name</label> 
 
     <input type="text" name="first-name" placeholder="First Name"> 
 
     </div> 
 
     <div class="field"> 
 
     <label>Last Name</label> 
 
     <input type="text" name="last-name" placeholder="Last Name"> 
 
     </div> 
 
\t <div class="field"> 
 
      <label>Categories</label>  
 
     </div> 
 
\t <div class="field"> 
 
\t \t <div class="inline fields"> 
 
\t \t \t \t <div class="field"> 
 
\t \t \t \t \t <div class="ui radio checkbox"> 
 
\t \t \t \t \t <input type="radio" name="frequency" checked="checked"> 
 
\t \t \t \t \t <label>A</label> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="field"> 
 
\t \t \t \t \t <div class="ui radio checkbox"> 
 
\t \t \t \t \t <input type="radio" name="frequency"> 
 
\t \t \t \t \t <label>B</label> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="field"> 
 
\t \t \t \t \t <div class="ui radio checkbox"> 
 
\t \t \t \t \t <input type="radio" name="frequency"> 
 
\t \t \t \t \t <label>C</label> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
     <button class="ui button" type="submit">Submit</button> 
 
    </form> 
 
</div>

Semantic-UI Zwei-Säulen-Form:

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/> 
 
<div class="ui text container"> 
 
    <h4 class="ui header">Semantic UI Form</h4> 
 
    <form class="ui form"> 
 
\t <div class="ui grid"> 
 
\t \t <div class="four wide column "> 
 
\t \t \t <label>First Name</label> 
 
\t \t </div> 
 
\t \t <div class="twelve wide column"> 
 
\t \t \t <input type="text" name="first-name" placeholder="First Name"> 
 
\t \t </div> \t 
 
\t </div> \t 
 
\t <div class="ui grid"> 
 
\t \t <div class="four wide column "> 
 
\t \t \t <label>Last Name</label> 
 
\t \t </div> 
 
\t \t <div class="twelve wide column"> 
 
\t \t \t <input type="text" name="first-name" placeholder="Last Name"> 
 
\t \t </div> \t 
 
\t </div> 
 

 
\t <div class="ui grid"> 
 
\t \t <div class="four wide column "> \t \t 
 
\t \t \t <div class="field"> 
 
\t \t \t \t <label>Categories</label> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="twelve wide column"> \t 
 
\t \t \t <div class="inline fields"> \t 
 
\t \t \t <div class="field"> 
 
\t \t \t \t <div class="ui radio checkbox"> 
 
\t \t \t \t <input type="radio" name="frequency" checked="checked"> 
 
\t \t \t \t <label>A</label> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="field"> 
 
\t \t \t \t <div class="ui radio checkbox"> 
 
\t \t \t \t <input type="radio" name="frequency"> 
 
\t \t \t \t <label>B</label> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="field"> 
 
\t \t \t \t <div class="ui radio checkbox"> 
 
\t \t \t \t <input type="radio" name="frequency"> 
 
\t \t \t \t <label>C</label> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> \t 
 
    <button class="ui button" type="submit">Submit</button> 
 
    </form> 
 
</div>

Quelle

2016-07-18 16:31:09

Mit ein wenig Arbeit hat dies mein Problem gelöst. Jetzt sollte das Layout reagieren. Wenn wir die Pixel fest programmiert hätten, wäre das Design nicht reaktionsfähig. Ich bin sehr glücklich mit deiner Antwort. Mein Fall ist, dass die Auswahl einer Option eine Unterkategorie erweitern sollte, ähnlich wie bei [dieses Formular] (https://www.bocket.se/ai/form/0), wenn Sie "lägenheter" aus der Kategorie auswählen, dann wird das folgende Formular erweitern. Meine Form soll ähnlich sein. –

Versuchen Sie dies mit Ihrem label

<label style="padding-right:50px">Title</label>

Sie können auch table in Ihrem Design verwenden, um Ihre Seite Design effizienter zu gestalten.

Quelle

2016-07-18 15:19:17 Niklaus

Eigentlich hat "OP" das Framework "Semantic UI" (genau wie BootStrap) für sein Projekt angefordert und Probleme mit diesem Framework bekommen. Solche Fixes konnten wir nicht verwenden. –

-1

ich Bootstrap empfehlen die Verwendung von - es wird Sie nicht mehr als 30 Minuten zu verstehen und wird Ihre Website Seite/Website-Layout so einfach sehend machen - http://getbootstrap.com/

Auch bedeutet, dass Sie Website mobil sein und Tablet-freundlich.

nur die Dateien auf Ihre Website - http://getbootstrap.com/getting-started/ (unter dem ersten Bootstrap CDN Überschrift).
Paste dann in das entsprechende Formular Layout möchten Sie (Sie diese zwicken) - http://getbootstrap.com/css/#forms (unter css Überschrift)
das Raster-Layout-System sehen - http://getbootstrap.com/css/#grid
Alle Dinge, die Sie nur tun, in dem Bootstrap-Code kann einfügen: Buttons, Icons, etc. (alle unter aufgeführten Komponenten - http://getbootstrap.com/components/

Quelle

2016-07-18 15:24:18 Pepper

geben Sie mir 10 Minuten und ich werde Ihren Code erstellen - mit Bootstrap und fügen Sie es hier, so dass Sie sehen können :-) – Pepper

-1

Re meine Antwort - hat Ihre Ansicht gemacht Bootstrap verwenden wie in meinen Schritten 1 - 4. Nahm mich 7 Minuten, nicht einmal 10 :-) ..paste das Folgende in eine Indexdatei um zu testen, wie es aussieht.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

</head> 
<body> 
<div class="container"> 
    <div class="row"> 

     <form class="form-horizontal"> 

      <div class="form-group"> 
       <label class="col-sm-2 control-label">Category</label> 
       <div class="col-sm-6"> 
        <label class="radio-inline"> 
         <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1 
        </label> 
        <label class="radio-inline"> 
         <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2 
        </label> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="inputTitle" class="col-sm-2 control-label">Title</label> 
       <div class="col-sm-6"> 
        <input type="text" class="form-control" id="inputTitle" placeholder="Title"> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="inputText" class="col-sm-2 control-label">Text</label> 
       <div class="col-sm-6"> 
        <textarea class="form-control" rows="3" placeholder="Text" id="inputText"></textarea> 
       </div> 
      </div> 

      <div class="form-group"> 
       <div class="col-sm-offset-2 col-sm-6"> 
        <button type="submit" class="btn btn-default">Submit</button> 
       </div> 
      </div> 
     </form> 

    </div> 
</div> 


<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
</body> 
</html>

Quelle

2016-07-18 15:37:36 Pepper

So richten Sie mein Etikett und Eingabefeld aus

Antwort

Verwandte Themen