如何格式化標籤和輸入標籤

在我的項目中，我有一個帶有四個標籤，四個文本輸入，一個提交按鈕和一個關閉按鈕的對話框。如何格式化標籤和輸入標籤

我希望它看起來是這樣的：

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

但acturally，它不會出現格式，它喜歡這樣：

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

這是醜陋的，我不喜歡這樣吃。

這裏是我的CSS和HTML代碼：

<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>

誰能幫我？

來源

2017-09-21 stack

爲什麼不使用一個表？ –

從你的截圖看來，整個問題看起來像.addDiv不夠寬。 –

如果你不想使用像Bootstrap，Materialize這樣的前端框架，你可以用'table'標籤來嘗試。否則，你可以在'bootstrap'中使用'ul，li'標籤來格式化你的表單組件。 –

可能是這樣呢？

* { 
 
    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>

來源

2017-09-21 07:36:27

添加到您的CSS fiddle

.secDiv input { 
    width: 50%; 
}

來源

2017-09-21 07:25:45 Znaneswar

而是嘗試將每個輸入和標籤，以自己的div，像這樣：

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

這樣做是增加了一個div .row在您的firDiv div裏面並在.row裏面爲您的標籤添加一個div，併爲您的輸入添加一個div。所以它看起來像這樣：

<div class="row">   

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

</div>

這有點容易理解和風格。

來源

2017-09-21 07:28:35

你需要在這裏做兩件事。首先你必須在第一個分區完成後清除浮標。其次是將float應用於您的輸入字段。

.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;}

我在firDiv在secDiv和float:left應用clear:both。

DEMO

來源

2017-09-21 07:32:19

如何格式化標籤和輸入標籤

回答

相關問題