Html 如何设置标签和输入标签的格式_Html_Css

Html 如何设置标签和输入标签的格式

html css

Html 如何设置标签和输入标签的格式,html,css,Html,Css,在我的项目中，我有一个对话框div，它有四个标签、四个文本输入、一个提交按钮和一个关闭按钮 <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:10

在我的项目中，我有一个对话框div，它有四个标签、四个文本输入、一个提交按钮和一个关闭按钮

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

我希望它看起来像这样：

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

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

<div class="row">        

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

</div>

但实际上，它不显示格式，它是这样的：

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

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

它很丑，我不想那样

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

以下是我的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>


.addDiv{宽度：25%；高度：20%；位置：绝对；顶部：35%；左侧：35%；边框：2px实心#ffffff；颜色：白色；显示：无；边框半径：15px；背景：rgba（0,0,0,0.7）；}
.firDiv{高度：80%；宽度：100%}
.firDiv标签{浮动：左；边距左：10%；边距顶部：2%；宽度：20%}
.firDiv输入{浮点：右；边框：1px实心#99ccff；背景：rgba（0,0,0,0.35）；右边距：10%；
页边空白顶部：2%；颜色：白色；宽度：45%}
.secDiv{高度：20%；文本对齐：居中；宽度：100%；页边空白顶部：5%}
aaaaaaaaa:

bbb:

CCCCCCCCC:

ddd:

谁能帮我？

将此添加到您的css中

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

将此添加到css中

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

而是尝试将每个输入和标签添加到它们自己的div中，如下所示：

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

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

<div class="row">        

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

</div>

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

这样做的目的是在

firDiv

div中添加一个div

.row

，并在

中添加一个div。row

为标签添加一个div，为输入添加一个div。所以看起来是这样的：

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

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

<div class="row">        

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

</div>


AAAAA:

这更容易理解和设置样式。

相反，尝试将每个输入和标签添加到它们自己的div中，类似这样：

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

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

<div class="row">        

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

</div>

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

这样做的目的是在

firDiv

div中添加一个div

.row

，并在

中添加一个div。row

为标签添加一个div，为输入添加一个div。所以看起来是这样的：

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

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

<div class="row">        

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

</div>


AAAAA:

这更容易理解和风格化。

这里需要做两件事。首先，您必须在第一次Div完成后清除浮动。第二种方法是将float left应用于输入字段

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

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

我在

secDiv

中应用了

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

在这里，您需要做两件事。首先，您必须在第一次Div完成后清除浮动。第二种方法是将float left应用于输入字段
<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>

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

我在secDiv
中应用了clear:
<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>

可能是这样的吗
<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>


*{
框大小：边框框；
}
.firDiv标签{
填充物：5px；
文本对齐：右对齐；
浮动：左；
宽度：17%；
}
.firDiv.控制{
浮动：左；
宽度：83%；
}
.表格组{
清楚：两者都有
}
秘书长{
左边缘：16%；
填充顶部：10px；
}

AAAAA:
bbbbb：
中交：
dddddddd：
可能是这样的吗
<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>


*{
框大小：边框框；
}
.firDiv标签{
填充物：5px；
文本对齐：右对齐；
浮动：左；
宽度：17%；
}
.firDiv.控制{
浮动：左；
宽度：83%；
}
.表格组{
清楚：两者都有
}
秘书长{
左边缘：16%；
填充顶部：10px；
}

AAAAA:
bbbbb：
中交：
dddddddd：
为什么不使用一个表呢？从您的屏幕截图来看，整个问题似乎是。addDiv不够宽。如果您不想使用像引导这样的前端框架，请使用Materialize
，您可以尝试使用表
标记。否则，您可以使用ul，li
标记和bootstrap
来格式化表单组件。为什么不使用表呢？从您的屏幕截图来看，整个问题似乎是。addDiv不够宽。如果您不想使用前端框架，如bootstrap，Materialize
，您可以尝试使用table
标记。否则，您可以使用ul，li
标记和bootstrap
来格式化表单组件。