HTML 页脚未在两个表格下方对齐-6ren

HTML 页脚未在两个表格下方对齐

转载作者：行者123 更新时间：2023-11-28 17:17:24

在我的本地服务器上使用下面的代码时，它看起来像这样:

我希望页脚从左到右对齐，填满整个页面，而不是中途对齐到左对齐的表格。完全 100% 宽度。

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

我尝试过的:

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

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;
}

<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>

最佳答案

添加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 页脚未在两个表格下方对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43400812/

文章推荐： css - 你如何在 LESS 中定位多个祖先类

文章推荐： javascript - 根据嵌套指令 Angular 的宽度更改文本

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

HTML 页脚未在两个表格下方对齐