Question

在本地服务器上使用以下代码时，它看起来像这样：

我希望页脚从左到右对齐，填充整个页面，而不是在左对齐的桌子中间对齐。完全100％宽度。

我不知道我做错了什么，我忽略了什么？

我尝试过的事情：

我查看了<table></table>代码
我查看了<th></th>和<tr></tr>代码
我检查了页脚和<p></p>
当删除左对齐的表时，问题似乎已得到解决
删除表格对齐中心时，问题仍然存在

＆＃13;

body {
    Helvetica,
    Arial,
    sans-serif;
    color: #333;
}

p {
    /* 1.5em;*/
    font: 20px Helvetica, Sans-Serif;
    color: white;
    overflow: hidden;
    padding: 15px;
    text-align: justify;
    background: rgb(0, 0, 0, 0.3);
    /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
}

footer {
    text-align: center;
}

table.invoice_main {
    color: #333;
    width: 250x;
    Helvetica,
    Arial,
    sans-serif;
    border-collapse: collapse;
    border-spacing: 0;
}

table.invoice_main td,
th {
    border: 1px solid #CCC;
    height: 30px;
}

table.invoice_main th {
    background: #F3F3F3;
    font-weight: bold;
}

table.invoice_main td {
    background: #FAFAFA;
    text-align: left;
    padding-left: 7px;
}

table.list {
    color: #333;
    Helvetica,
    Arial,
    sans-serif;
    width: 800px;
    border-collapse: collapse;
    border-spacing: 0;
}

table.list td,
th {
    border: 1px solid #CCC;
    height: 30px;
}

table.list th {
    background: #F3F3F3;
    font-weight: bold;
}

table.list td {
    background: #FAFAFA;
    text-align: left;
    padding-left: 7px;
}

＆＃13;

<p>Invoice - Add</p>
<form method="post" action="add.php">
    <table class="invoice_main" align="left">
        <tr>
            <th>Invoice to</th>
            <th>Invoice address</th>
        </tr>
        <tr>
            <td><img src="view.png" alt="Invoice to" width="15px" height="15px"> Name:
                <input type="text" required name="name">
            </td>
            <td><img src="address.png" alt="Address" width="15px" height="15px"> Address:
                <input type="text" required name="address">
                <br> Postalcode:
                <input type="text" required name="postalcode">
                <br>Place:
                <input type="text" required name="place">
            </td>
        </tr>
    </table>
    <table class="list" align="center">
        <tr>
            <th>Date</th>
            <th>Description</th>
            <th>Amount</th>
            <th>#</th>
        </tr>
        <tr>
            <td><img src="calendar.png" alt="Calendar" width="15px" height="15px"> Date:
                <input type="date" style=" Helvetica, Arial, sans-serif" name="date" required>
            </td>
            <td><img src="description.png" alt="Description" width="15px" height="15px"> Description:
                <input type="text" required pattern="[a-zA-Z]+" name="description">
            </td>
            <td><img src="amount.png" alt="Amount" width="15px" height="15px"/> Amount:
                <input type="number" placeholder="€0,01" required name="amount" min="0.01" step="0.01" max="10000">
            </td>
            <td>
                <input type="submit" name="submit" value="+">
            </td>
        </tr>
    </table>
</form>
<p>
    <footer>Footer</footer>
</p>

＆＃13;

Answer 1

在clear: both元素上添加<p>作为样式属性。

此外，您在字体名称前缺少font-family指定，并且其中一个宽度缺少p中的px。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Invoice</title>
  <meta name="description" content="Invoice">
  <meta name="author" content="Tredgy">
  <style>
    body {
      font-family: Helvetica, Arial, sans-serif;
      color: #333;
    }
    
    p {
      /* 1.5em;*/
      font: 20px Helvetica, Sans-Serif;
      color: white;
      overflow: hidden;
      padding: 15px;
      text-align: justify;
      background: rgb(0, 0, 0, 0.3);
      /* fallback color */
      background: rgba(0, 0, 0, 0.7);
      text-align: center;
      clear: both;
    }
    
    footer {
      text-align: center;
    }
    
    table.invoice_main {
      color: #333;
      width: 250px;
      font-family: Helvetica, Arial, sans-serif;
      border-collapse: collapse;
      border-spacing: 0;
    }
    
    table.invoice_main td,
    th {
      border: 1px solid #CCC;
      height: 30px;
    }
    
    table.invoice_main th {
      background: #F3F3F3;
      font-weight: bold;
    }
    
    table.invoice_main td {
      background: #FAFAFA;
      text-align: left;
      padding-left: 7px;
    }
    
    table.list {
      color: #333;
      font-family: Helvetica, Arial, sans-serif;
      width: 800px;
      border-collapse: collapse;
      border-spacing: 0;
    }
    
    table.list td,
    th {
      border: 1px solid #CCC;
      height: 30px;
    }
    
    table.list th {
      background: #F3F3F3;
      font-weight: bold;
    }
    
    table.list td {
      background: #FAFAFA;
      text-align: left;
      padding-left: 7px;
    }
  </style>
</head>

<body>
  <p>Invoice - Add</p>
  <form method="post" action="add.php">
    <table class="invoice_main" align="left">
      <tr>
        <th>Invoice to</th>
        <th>Invoice address</th>
      </tr>
      <tr>
        <td><img src="view.png" alt="Invoice to" width="15px" height="15px"> Name: <input type="text" required name="name"></td>
        <td><img src="address.png" alt="Address" width="15px" height="15px"> Address: <input type="text" required name="address"><br> Postalcode: <input type="text" required name="postalcode"><br>Place: <input type="text" required name="place"></td>
      </tr>
    </table>
    <table class="list" align="center">
      <tr>
        <th>Date</th>
        <th>Description</th>
        <th>Amount</th>
        <th>#</th>
      </tr>
      <tr>
        <td><img src="calendar.png" alt="Calendar" width="15px" height="15px"> Date: <input type="date" style=" Helvetica, Arial, sans-serif" name="date" required></td>
        <td><img src="description.png" alt="Description" width="15px" height="15px"> Description: <input type="text" required pattern="[a-zA-Z]+" name="description"></td>
        <td><img src="amount.png" alt="Amount" width="15px" height="15px"> Amount: <input type="number" placeholder="€0,01" required name="amount" min="0.01" step="0.01" max="10000"></td>
        <td><input type="submit" name="submit" value="+"></td>
      </tr>
    </table>
  </form>
  <p>
    <footer>Footer</footer>
  </p>
</body>

</html>

HTML页脚未在两个表

1 个答案: