Question

我为W3学校使用了CSS样式表，该样式表定义了25％和75％的列。我想再添加两种列类型，分别为10％和65％

我复制了.col-25类，并将其重命名为.col-10，并将宽度调整为10％

当我将此类添加到输入字段时，结果表单将在下一行向下且宽度为100％的情况下显示输入

谁能解释我做错了什么？

@charset "utf-8";
/* CSS Document */

input.invalid, textarea.invalid, select.invalid
{
    background-color: #ffdddd;
}

/* Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  vertical-align: right;    
}

/* Style the submit button */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

.my-button{
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

/* Style the container */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
  text-align: right;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Floating column for inputs: 10% width added by Malcolm but will not     display correctly */
.col-10 {
  float: left;
  width: 10%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-10, .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

<body>
GOODS RECEIPT NOTE  
<div class="container">
  <form name="f1" id = "f1" >
    <div class="row">
      <div class="col-25">
        <label for="haulier">Customer : </label>
      </div>
      <div class="col-75">
        <input type="text" id="customer" name="customer" placeholder="Customer name">
      </div>
    </div>


    <div class="row">
      <div class="col-25">
        <label for="haulier">Haulier : </label>
      </div>
      <div class="col-75">
        <input type="text" id="haulier" name="haulier" placeholder="Haulier name">
      </div>
    </div>

     <div class="row">
      <div class="col-25">
        <label for="vehicle_registration">Vehicle registration : </label>
      </div>
      <div class="col-75">
        <input type="text" id="vehicle_registration" name="vehicle_registration" placeholder="Vehicle registration">
      </div>
    </div> 

     <div class="row">
      <div class="col-25">
        <label for="airwaybill">Airwaybill : </label>
      </div>
      <div class="col-10">
        <input type="text" id="Pfx" name="awb_pfx" placeholder="Pfx">
      </div>
      <div class="col-25">
        <input type="text" id="airwaybill" name="airwaybill" placeholder="Airwaybill number">
      </div> 
    </div>

     <div class="row">
      <div class="col-25">
        <label for="shipper">Shipper : </label>
      </div>
      <div class="col-75">
        <input type="text" id="shipper" name="shipper" placeholder="Shipper name">
      </div>
    </div>


     <div class="row">
      <div class="col-25">
        <label for="consignee">Consignee : </label>
      </div>
      <div class="col-75">
        <input type="text" id="consignee" name="consignee" placeholder="Consignee name">
      </div>
    </div>

     <div class="row">
      <div class="col-25">
        <label for="destination">Destination : </label>
      </div>
      <div class="col-75">
        <input type="text" id="destination" name="destination" placeholder="Consignment destination">
      </div>
    </div>    


      <div class="row">       
      <div class="col-25">
        <label for="pieces">Pieces : </label>
      </div>
      <div class="col-75">
        <input type="text" id="pieces" name="pieces" placeholder="Number of pieces">
      </div>
    </div>    




    <div class="row">
      <div class="col-25">
        <label for="documents">Documents : </label>
      </div>
      <div class="col-75">
        <select id="documents" name="documents">
          <option value="">Please select</option>
          <option value="yes">Yes</option>
          <option value="no">No</option>          
        </select>
      </div>
    </div>


    <div class="row">
      <div class="col-25">
        <label for="subject">Comments : </label>
      </div>
      <div class="col-75">
        <textarea id="comments" name="comments" style="height:100px"></textarea>
      </div>
    </div>

    <div class="row">
      <div class="col-25">

      </div>
      <div class="col-75">
<input type="button" class="my-button" name="btn_grn" id="btn_grn" value="Create goods receipt note">
      </div>
    </div>
    </form>
</div>
<div id="errors"></div> 

<div id="dialog-confirm" title="Print GRN & labels">

</div>


</body>

Answer 1

不确定在这里看到这个问题。我将您的代码复制到this Codepen，并且看起来可以正常工作。我所做的唯一更改就是创建/添加了一个.col-65类，正如您提到的那样，在输入的10％宽度旁边，所有内容都响应并占用一行。这不是您要找的结果吗？

为什么在使用Float：left时输入元素会掉线

1 个答案: