Question

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

我希望它看起来像这样：

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

但实际上，它没有出现格式，它喜欢这个：

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>

谁能帮帮我？

Answer 1

你需要做的两件事。首先，你必须在第一个Div完成后清除浮子。第二个是将float left应用于输入字段。

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

我已在clear:both和secDiv float:left中应用了firDiv。

DEMO

Answer 2

可能是这样的？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

将此添加到您的css fiddle

.secDiv input {
  width: 50%;
}

Answer 4

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

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

这样做会在.row div中添加div firDiv，在.row内为您的标签添加div，为您的输入添加一个div。所以它看起来像这样：

<div class="row">        

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

</div>

这有点容易理解和风格。

如何格式化标签和输入标签

4 个答案: