HTML输入框在打印页面中未对齐

时间:2019-07-08 10:44:50

标签: javascript html css

我有一个html表单,提交表单后,用户被带到显示其输入值的不同页面,在显示下方将是打印按钮。下面是可打印页面的一些代码

<style>
    .input-w label {
        display: inline-block;
        vertical-align: middle;
    }

    .input-w input {
        display: inline-block;
        vertical-align: middle;

    }

.zebra {margin-top:1815px;}
    @media screen and (max-width: 600px) {
  .zebra {margin-top:20px;}
}
    </style>
<div ><a href="index.html"><img src="web\img\teia.PNG" alt="" width="300" height="135"></a></div>
<br>
<h6 align="center"><b>Member Registration Form</b></h6>
<br>
<!-- <h3 class="main_question"><strong>1/5</strong>Primary Applicant Name</h3> -->
<div class="input-w">
   <div class="form-group">
       <label>First Name:</label>
       <input type="text" style="width:400px; height:37px;" name="firstname" class="form-control" placeholder="<?php echo $name;?>" readonly>
   </div>
</div>
<div class="input-w">
   <div class="form-group">
      <label>Last Name:</label>
      <input type="text" name="lastname" style="width:400px; height:37px;" class="form-control" placeholder="<?php echo $lastname ?>" readonly>
    </div>
</div>
<div class="input-w">
   <div class="form-group">
      <label>Company Name:</label>
      <input type="text" name="company" style="width:400px; height:37px;" class="form-control" placeholder="<?php echo $company?>" readonly>
   </div>
</div>
<div class="input-w">
   <div class="form-group">
      <label>Designation:</label>
      <input type="text" name="designation" style="width:400px; height:37px;" class="form-control" placeholder="<?php echo $designation?>" readonly>
   </div>
</div>
<div class="input-w">
   <div class="form-group">
      <label>Address:</label>
      <input type="text" name="company" style="width:400px; height:37px;" class="form-control" placeholder="<?php echo $address?>" readonly>
    </div>
</div>
<div class="input-w">
   <div class="form-group">
      <label>City:</label>
      <input type="text" name="designation" style="width:400px; height:37px;" class="form-control" placeholder="<?php echo $city?>" readonly>
   </div>
</div>
<div class="input-w">
      

现在,当用户单击“打印”按钮时,框未对齐,如下图所示 enter image description here 我的表单页面如下 enter image description here

我想在打印页面中正确对齐框,以便在用户打印页面时正确显示。而不影响我的表单页面。安云对此有想法吗

0 个答案:

没有答案