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

看起来你的modal-body.width值并不像你想要的那样工作。我不确定你的问题是否清楚，但看起来你希望输入是模态体的宽度。

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

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>

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

1 个答案: