如何解决这个布局?保证金或填充?

时间:2016-08-05 03:45:59

标签: html css

如何修复Firebase Cloud Messaging documentation

盯着“我已阅读并理解......”以及“申请人的签名......”的开始并不是同一个节奏。一个在<p>,一个在<div>中。这是我这部分的代码。

<p style="margin:0;"><b>I have read and understand the “Personal Information Collection Statement” attached in this form.</b></p>
<p style="margin:0; height:6px;">&nbsp;</p>
<p style="margin:0;">Please confirm that your instructions have been clearly, accurately, and completely set out in this form
before signing it.</p>
<p style="margin:0;">&nbsp;</p>

<div style="width:100%; padding:0px; margin:0px;">
 <table style="width:100%; padding:0px; margin:0px;">
 <tr><td style="width:60%;">
 <div class="row" style="display: flex; flex-direction: row; padding:12px 12px 0px 0px; margin:0px;">
  <label><strong>Applicant’s signature: </strong></label>
  <span style="flex: 1; display: block;">
  <input style="width: 100%;
  margin-left: 5px;
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  outline: none !important;"/>
  </span>
 </div>
</td>
<td style="width:40%;">
 <div class="row" style="display: flex; flex-direction: row; padding:12px 12px 0px 12px; margin:0px;">
  <label><strong>Date: </strong></label>
  <span style="flex: 1; display: block;">
  <input style="width: 100%;
  margin-left: 5px;
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  outline: none !important;"/>
  </span>
 </div>
</td></tr>
<tr><td style="width:60%;">
 <div class="row" style="display: flex; flex-direction: row; padding:13px 12px 0px 0px; margin:0px;">
  <label><strong>Applicant’s name: </strong></label>
  <span style="flex: 1; display: block;">
  <input style="width: 100%;
  margin-left: 5px;
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  outline: none !important;"/>
  </span>
 </div>
</td>
<td style="width:50%;">
</td></tr>

 </table>
<p style="margin:0; padding:0px;">&nbsp;</p><p style="margin:0; paddihttp://stackoverflow.com/questions/ask#ng:0px;">&nbsp;</p><p style="margin:0; padding:0px;">&nbsp;</p>
</div>

使用“cellspace = 0”方法后,效果会好得多。但它们之间仍然存在很小的空间。这是this problem我以类似的方式。 (我使用这个例子,因为它可以更容易地显示不同。上面使用的那个更难以看到问题。)

此部分的代码:

<h2 style="font-size:140%; margin:0;"><strong>Your Registration Information</strong></h2>
<p style="margin:0; height:15px;">&nbsp;</p>
<div style="width:100%; padding:0px; margin:0px;">
 <table style="width:100%; padding:0px; margin:0px;" cellspacing="0">
 <tr><td style="width:50%;">
 <div class="row" style="display: flex; flex-direction: row; ">
  <label><strong>Name: </strong></label>
  <span style="flex: 1; display: block;">
  <input style="width: 100%;
  margin-left: 5px;
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  outline: none !important;"/>
  </span>
 </div>
</td>
<td style="width:50%;">
 <div class="row" style="display: flex; flex-direction: row;  margin-left:10px; ">
  <label><strong>Email: </strong></label>
  <span style="flex: 1; display: block;">
  <input style="width: 100%;
  margin-left: 5px;
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  outline: none !important;"/>
  </span>
 </div>
</td></tr>
<tr><td style="width:50%;">
 <div class="row" style="display: flex; flex-direction: row; padding:13px 0px 13px 0px;">
  <label><strong>Phone: </strong></label>
  <span style="flex: 1; display: block;">
  <input style="width: 100%;
  margin-left: 5px;
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  outline: none !important;"/>
  </span>
 </div>
</td>
<td style="width:50%;">
 <div class="row" style="display: flex; flex-direction: row;  margin-left:10px; padding:13px 0px 13px 0px;">
  <label><strong>Reference number: </strong></label>
  <span style="flex: 1; display: block;">
  <input style="width: 100%;
  margin-left: 5px;
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  outline: none !important;"/>
  </span>
 </div>
</td></tr>
<tr><td style="width:400px;">
 <div class="row" style="display: flex; flex-direction: row; padding: 0px 0px 2px 0px;">
  <label><strong>Date of submission: </strong></label>
  <span style="flex: 1; display: block;">
  <input style="width: 100%;
  margin-left: 5px;
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  outline: none !important;"/>
  </span>
 </div>
</td><td></td></tr>
 </table>
</div>

非常感谢你的帮助!

3 个答案:

答案 0 :(得分:0)

将表格的cellspacing属性设置为0。

SELECT * FROM tab
ORDER BY
  substring_index(path, '.',  1) + 0, ## sort by 1st part
  substring_index(substring_index(path, '.', 2), '.' , -1) + 0, ## sort by 2nd part
  substring_index(path, '.', -1) + 0 ## sort by 3rd part

答案 1 :(得分:0)

填充是为父... 保证金适用于孩子。所以2你可以用于定位。 或者您可以将position:relative设置为一个对象并设置其位置(左,上,右,下) )

答案 2 :(得分:0)

我添加了margin-left:-1px;在所需的div。

<h2 style="font-size:140%; margin:0;"><strong>Your Registration Information</strong></h2>
<p style="margin:0; height:15px;">&nbsp;</p>
<div style="width:100%; padding:0px; margin:0px;">
 <table style="width:100%; padding:0px; margin:0px;" cellspacing="0">
 <tr><td style="width:50%;">
 <div class="row" style="display: flex; flex-direction: row;  margin-left: -1px;">
  <label><strong>Name: </strong></label>
  <span style="flex: 1; display: block;">
  <input style="width: 100%;
  margin-left: 5px;
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  outline: none !important;"/>
  </span>
 </div>
</td>
<td style="width:50%;">
 <div class="row" style="display: flex; flex-direction: row;  margin-left:10px; ">
  <label><strong>Email: </strong></label>
  <span style="flex: 1; display: block;">
  <input style="width: 100%;
  margin-left: 5px;
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  outline: none !important;"/>
  </span>
 </div>
</td></tr>
<tr><td style="width:50%;">
 <div class="row" style="display: flex; flex-direction: row; padding:13px 0px 13px 0px; margin-left: -1px;">
  <label><strong>Phone: </strong></label>
  <span style="flex: 1; display: block;">
  <input style="width: 100%;
  margin-left: 5px;
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  outline: none !important;"/>
  </span>
 </div>
</td>
<td style="width:50%;">
 <div class="row" style="display: flex; flex-direction: row;  margin-left:10px; padding:13px 0px 13px 0px;">
  <label><strong>Reference number: </strong></label>
  <span style="flex: 1; display: block;">
  <input style="width: 100%;
  margin-left: 5px;
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  outline: none !important;"/>
  </span>
 </div>
</td></tr>
<tr><td style="width:400px;">
 <div class="row" style="display: flex; flex-direction: row; padding: 0px 0px 2px 0px;  margin-left: -1px;">
  <label><strong>Date of submission: </strong></label>
  <span style="flex: 1; display: block;">
  <input style="width: 100%;
  margin-left: 5px;
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  outline: none !important;"/>
  </span>
 </div>
</td><td></td></tr>
 </table>
</div>