Wie man Etiketten formatiert und Tags eintippt

In meinem Projekt habe ich ein div dialog mit vier Labels, vier Texteingaben, einem Submit-Button und einem shutdow-Button.Wie man Etiketten formatiert und Tags eintippt

Ich will es scheint wie folgt aus:

AAAAAAAA:input text 
BBBBBBBB:input text 
CCCCCCCC:input text 
DDDDDDDD:input text 
    submit shutdown

Aber acturally, ist es nicht Format angezeigt wird, es gefällt das:

AAAAAAAA:input text 
BBBBBBBB: 
     input text 
CCCCCCCC:input text 
DDDDDDDD: 
    submit input text 
     shutdown

Es ist hässlich, ich will es nicht so gemeint .

Hier ist meine CSS und HTML-Code:

<style> 
.addDiv{width:25%;height:20%;position:absolute;top:35%;left:35%;border:2px solid #ffffff;color:white;display:none;border-radius:15px;background:rgba(0,0,0,0.7);} 
.firDiv{height:80%;width:100%} 
.firDiv label{float:left;margin-left:10%;margin-top:2%;width:20%} 
.firDiv input{float:right;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%; 
        margin-top:2%;color:white;width:45%} 
.secDiv{height:20%;text-align:center;width:100%;margin-top:5%} 
</style> 


<div id="addCnt" class="addDiv"> 
<form action="mng.php?act=add&table=IDC" method="POST"> 
     <div class="firDiv"> 
     <label>AAAAAAA:</label><input type="text" name="prdSty"><br /> 
     <label>BBBBBBB:</label><input type="text" name="diffLvl"><br /> 
     <label>CCCCCCC:</label><input type="text" name="repTm"><br /> 
     <label>DDDDDDD:</label><input type="text" name="fixTm"><br /> 
     </div> 
     <div class="secDiv"> 
     <input type="submit" value="add" /><input id="sdnBt" type="button" value="shutdown" > 
     </div> 
</form> 
</div>

Wer kann mir helfen?

Quelle

2017-09-21 stack

warum nicht nur eine Tabelle verwenden? –

Von Ihren Screenshots sieht es aus wie das ganze Problem ist .addDiv ist nicht breit genug. –

Wenn Sie keine Frontend-Frameworks wie 'Bootstrap, Materialize' verwenden möchten, können Sie das mit dem Tag' table' versuchen. Andernfalls können Sie 'ul, li' -Tags mit' bootstrap' verwenden, um Ihre Formularkomponenten zu formatieren. –

kann so etwas wie dieses?

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.firDiv label { 
 
    padding: 5px; 
 
    text-align: right; 
 
    float: left; 
 
    width: 17%; 
 
} 
 

 
.firDiv .control { 
 
    float: left; 
 
    width: 83%; 
 
} 
 

 
.form-group { 
 
    clear: both 
 
} 
 

 
.secDiv { 
 
    margin-left: 16%; 
 
    padding-top:10px; 
 
    
 
}

<form action="mng.php?act=add&table=IDC" method="POST"> 
 
    <div class="firDiv"> 
 
    <div class='form-group'> 
 
     <label>AAAAAAA:</label> 
 
     <div class='control'><input type="text" name="prdSty"></div> 
 
    </div> 
 
    <div class='form-group'> 
 
     <label>BBBBBBB:</label> 
 
     <div class='control'><input type="text" name="prdSty"></div> 
 
    </div> 
 
    <div class='form-group'> 
 
     <label>CCCCCCCC:</label> 
 
     <div class='control'><input type="text" name="prdSty"></div> 
 
    </div> 
 
    <div class='form-group'> 
 
     <label>DDDDDDDDD:</label> 
 
     <div class='control'><input type="text" name="prdSty"></div> 
 
    </div> 
 
    </div> 
 
    <div class="secDiv"> 
 
    <input type="submit" value="add" /> 
 
    <input id="sdnBt" type="button" value="shutdown"> 
 
    </div> 
 
    
 
</form>

Quelle

2017-09-21 07:36:27

fügen Sie diese zu Ihrer css fiddle

.secDiv input { 
    width: 50%; 
}

Quelle

2017-09-21 07:25:45 Znaneswar

versuchen vielmehr jede Eingabe hinzugefügt und zu ihren eigenen div, so etwas wie dieses Label:

https://jsfiddle.net/ba0cL61b/5/

Was das bedeutet ist, fügt ein div .row in Ihrem firDiv div und innerhalb der .row fügt ein div für Ihr Etikett und eines für Ihre Eingabe. So würde es so aussehen:

<div class="row">   

    <div class="label"> 
    <label>AAAAAAA:</label> 
    </div> 
    <div class="input"> 
    <input type="text" name="prdSty">   
    </div> 

</div>

Dies ist ein bisschen einfacher zu verstehen und Stil.

Quelle

2017-09-21 07:28:35

Zwei Dinge, die Sie hier tun müssen. Zuerst müssen Sie die Schwimmer nach der ersten Div abgeschlossen. Zweitens ist Float links auf Ihre Eingabefelder anzuwenden.

.firDiv input{float:left;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%; 
       margin-top:2%;color:white;width:45%;} 
    .secDiv{height:20%;text-align:center;width:100%;margin-top:10%; clear:both;}

habe ich clear:both in secDiv und float:left in firDiv angewendet.

DEMO

Quelle

2017-09-21 07:32:19

Wie man Etiketten formatiert und Tags eintippt

Antwort

Verwandte Themen