CODEWITHSUNDEEP
htmlcss
stack
stack

Reputation: 841

How to format label and input tags

In my project, I have a dialog div with four labels, four text input, one submit button and one shutdow button.

I want it appears like this:

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

But acturally, it does not appear format, it likes this:

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

It is ugly, I don't want it like that.

Here is my css and 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>

Who can help me?

Upvotes: 0

Views: 2400

Answers (4)

Balakrishna Gondesi
Balakrishna Gondesi

Reputation: 118

may be something like this? 

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

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

Two things you need to do here. First you have to clear the floats after the first Div completed. Second is apply float left to your input fields.

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

I have applied clear:both in secDiv and float:left in firDiv.

DEMO

Upvotes: 1

manneJan89
manneJan89

Reputation: 1024

Rather try adding each input and label to their own div, something like this:

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

What this does is adds a div .row inside your firDiv div and inside the .row adds a div for your label and one for your input. So it would look like this:

<div class="row">        

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

</div>

This is a bit easier to understand and style.

Upvotes: 0

Znaneswar
Znaneswar

Reputation: 3387

add this to your css fiddle

.secDiv input {
  width: 50%;
}

Upvotes: 0

Related Questions