Question

我想将id 1和id 2放在彼此旁边，<b>放在input元素上方的两个div中。

<div>
  <div id="1 " style = "float:left; clear:both">
    <b style ="color: #444444" >Date</b>
    <input class="duedatetextbox" type="text" placeholder="Enter date"                tabindex="101">                        
  </div>
  <div id="2" style = "float:left; clear:both;padding-left:80px;">
    <b style ="color: #444444" >Time</b>
    <input class="duedatetextbox" type="text" placeholder="Enter time"                tabindex="102">
  </div>  
</div>

提前谢谢！

Answer 1

尝试以下

 <div >
    <div id="1 " style = "float:left;">
      <b style ="color: #444444" >Date</b><br>
         <input class="duedatetextbox" type="text" placeholder="Enter date" tabindex="101">                        
   </div>
   <div id="2" style = "float:left;padding-left:80px;">
      <b style ="color: #444444" >Time</b><br>
         <input class="duedatetextbox" type="text" placeholder="Enter time" tabindex="102">
    </div>  
  </div>

Answer 2

两个div的宽度均为50％，以使它们在宽度上展开，并将b和input标记设为display:block以逐一进行。

div.ids {
  width: 50%;
}

div.ids b {
  display: block;
  padding: 10px;
}

div.ids input {
  display: block;
  padding: 10px;
  background: whitesmoke;
  border: solid 1px grey;
  border-radius: 3px;
}

<div>
  <div class="ids" id="1" style="float:left; clear:both">
    <b style="color: #444444">Date</b>
    <input class="duedatetextbox" type="text" placeholder="Enter date" tabindex="101">
  </div>
  <div class="ids" id="2" style="float:left;">
    <b style="color: #444444">Time</b>
    <input class="duedatetextbox" type="text" placeholder="Enter time" tabindex="102">
  </div>
</div>

Answer 3

将display:flex和width添加到主div

＆＃13;

<div style="width:400px; display: inline-flex;">
  <div id="1 " style = "float:left; clear:both; width:50%;">
    <b style ="color: #444444" >Date</b>
    <input class="duedatetextbox" type="text" placeholder="Enter date"                tabindex="101">                        
</div>
<div id="2" style = "float:left; clear:both;padding-left:10px; width:50%;">
  <b style ="color: #444444" >Time</b>
  <input class="duedatetextbox" type="text" placeholder="Enter time"                tabindex="102">
</div>  
</div>

＆＃13;

如何将两个父div放在一起？

3 个答案: