有一个输入框填充html页面的其余部分

Question

我已经看了很多这些页面和问题。我找到了正确的答案，但我无法想出来拯救我的生命。我想做与第二个问题非常相似的事情，但我无法弄清楚如何去做。 Style input element to fill remaining width of its container

我想要做的就是将所有的输入拉伸到另一边，但它们只是停在窗体部分的末尾。我觉得形式是我的问题，而不是输入框。如何让表单伸展到其父级的宽度。我已经附上了整个代码，看看是否有帮助。

<style> 

div.modal-header{background-color: #1A2930; color: white; } 
div.modal-footer{ background-color: #1A2930; color: white; } 

div.modal-body{ background-color: #F0F0F0; color: #0A1612; width: 100%; } 
div.movement-modal-form{ width: 100%; } 

label 
{ 
float: left; 
font-size: 20px 
} 
span{ 
display: block; 
overflow: hidden; 
width: 100% 
} 

input 
{ 
background-color: #C5C1C0; 
border: solid 2px #0A1612; 
color: black; 
width: 100%; 
height: 25px; 
font-size:12px; 
vertical-align:0px 
} 
textarea 
{ 
background-color: #C5C1C0; 
border: solid 2px #0A1612; 
width : 100% 
} 

</style> 

<div id="movement-modal" class="modal fade" role="dialog"> 
<div class="modal-dialog"> 
<div class="modal-content"> 

    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&#x274C; </button> 
    <h4 id="modal-title" class="modal-title">{{#i18n}}inventory.modify.button.new-movement{{/i18n}}</h4> 
    </div> 

    <div class="modal-body"> 
    <form id="movement-modal-form" 
    > 
     {{>inventory/partials/movement-id-field-modal}} 
     {{>inventory/partials/product-fields-modal}} 
     <br/> 
     <p> 
     <!--This is #4--> 

      <label id="movement-lable" for="movement-date">{{#i18n}}inventory.modify.table.movement-date{{/i18n}}</label>&nbsp; 
      <input id="movement-date" class="movement-date" type="date" required> 
     </p> 
     <br/> 
     <p> 
     <!--This is #5--> 
      <label for="store-from">{{#i18n}}inventory.modify.table.store-from{{/i18n}}</label>&nbsp; 
      <br/> 
      <br/> 
      <select id="store-from" class="store-from"required> 
       {{#inventoryStoreList}} 
        <option value={{ id }}>{{ name }}</option> 
       {{/inventoryStoreList}} 
     </select> 
     </p> 
     <br/> 
     <p> 

     <!--this is # 6--> 
      <label for="store-from-current-quantity">{{#i18n}}inventory.movement.modal.store-from-current-quantity{{/i18n}}</label>&nbsp; 
      <input id="store-from-current-quantity" class="store-from-current-quantity" type="text" disabled> 
     </p> 
     <br/> 
     <p> 

     <!--This is # 7--> 
      <label for="store-to">{{#i18n}}inventory.modify.table.store-to{{/i18n}}</label>&nbsp; 
      <select id="store-to" class="store-to" required> 
       {{#inventoryStoreList}} 
        <option value={{ id }}>{{ name }}</option> 
       {{/inventoryStoreList}} 
      </select> 
     </p> 
     <br/> 
     <p> 
     <!--8--> 
      <label for="store-to-current-quantity">{{#i18n}}inventory.movement.modal.store-to-current-quantity{{/i18n}}</label>&nbsp; 
      <input id="store-to-current-quantity" class="product-current-quantity" type="text" disabled> 
     </p> 
     <br/> 
     <p> 
     <!--9--> 
      <label for="movement-quantity">{{#i18n}}inventory.modify.table.quantity-requested{{/i18n}}</label>&nbsp; 
      <input id="movement-quantity" class="movement-quantity" type="number" step="1" min="1" pattern="\d*" required> 
     </p> 
     <br/> 
     <!--10 Notes--> 
     {{>inventory/partials/note-field-modal}} 
     <input type="submit" style="display: none"> 
    </form> 
    </div> 


    <div class="modal-footer"> 
    <button type="button" class="btn btn-danger" data-dismiss="modal" style="float: left">{{#i18n}}inventory.modify.button.cancel{{/i18n}}</button> 
    <button id="movement-modal-submit" type="button" class="btn btn-success" style="float: right">{{#i18n}}inventory.movement.modal.button.save{{/i18n}}</button> 
    </div> 
</div> 

Answer 1

它看起来像你的语气，body.width值不喜欢的工作打算。我不确定你的问题是否清楚，但看起来你希望输入是模态体的宽度。

如果是这种情况，那么您可以将移动日期类的宽度设置为100％。这会将输入元素的宽度设置为父元素的100％宽度，在本例中为模态体。

---

div.modal-body{ 
    background-color: white; 
    color: black; 
    margin: 20px 0 20px 0; 
    padding: 15px; 
    width: 500px; 
    overflow: hidden; 
} 

input.movement-date { 
    background-color:lightgray; 
    border: solid 2px #6E6E6E; 
    width: 100%; 
    height: 25px; 
    font-size:12px; 
    vertical-align:0px; 
} 

---

---

<div class="modal-body"> 
    <form id="movement-modal-form"> 
     <p> 
     <label id="movement-lable" for="movement-date"></label> 
     <input id="movement-date" class="movement-date" type="date" required/> 
    </p> 
    </form> 
</div> 

---