Question

我正在创建一个离开模板，其中我使用bootstrap进行响应。
但它在label和colon

之间占用更多空间

这是我的代码。我可以减少label和colon之间的空间
https://jsfiddle.net/zewykeLm/我希望这样，如果还有其他好办法请建议我

Answer 1

试试这个。使用表格和 ::before 选择器。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        table tbody tr td:nth-child(2)::before {
            content: " :";
        }
    </style>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <td>Employee name</td>
                <td>bnhvg</td>
            </tr>
            <tr>
                <td>Requested Leave from</td>
                <td>bnhvg</td>
            </tr>
            <tr>
                <td>Requested Leave from</td>
                <td>bnhvg</td>
            </tr>
            <tr>
                <td>Total Time requested</td>
                <td>bnhvg</td>
            </tr>
            <tr>
                <td>Leave Type</td>
                <td>bnhvg</td>
            </tr>
        </tbody>
    </table>

</body>

</html>

Answer 2

通过替换此

来纠正您的代码错误

<div class="container">
<section class="col-lg-10 col-md-10 col-sm-10 col-xs-10" style="margin-top:4%;">
  <div style="text-align: right;"><label>Date:</label>&nbsp;<span>#sentDate#</span></div>
  <table>
    <tbody>
        <tr>
            <td><label>Employee name</label></td>
            <td>#empName#</td>
        </tr>
        <tr>
            <td><label>Employee Id</label></td>
            <td>#empId#</td>
        </tr>
        <tr>
            <td><label>Requested Leave from</label></td>
            <td>#levFrom#</td>
        </tr>
        <tr>
            <td><label>Requested Leave To</label></td>
            <td>#levTo#</td>
        </tr>
        <tr>
            <td><label>Total Time requested</label></td>
            <td>#totalTime#</td>
        </tr>
        <tr>
            <td><label>Leave Type</label></td>
            <td>#levType#</td>
        </tr>
    </tbody>
</table>
<div><label>Special notes:</label></div>
  <div style="margin: 20px 0 20px 0;">
        #I have given propernotice to all pertinent parties that I will be out of the office for the period of time listed above and have made arrangements for coverage of all my office responsibilites.#
  </div>
  <div style="text-align: left;"><label> Regards</label></div>
  <table>
        <tbody>
              <tr>
                    <td><label>Name</label></td>
                    <td>#name#</td>
              </tr>
              <tr>
                    <td><label>Mobile Number</label></td>
                    <td>#mobNum#</td>
              </tr>
        </tbody>
  </table>
  </section>
  </div>

标签和冒号之间的空格

2 个答案: