如何对齐 HTML 框中的文本，使其不影响每边的间距

Question

我是 HTML 的新手，目前正在从事我的大学项目工作，我真的需要一些帮助。我正在为 "blog-like" 网站使用背景框，该网站需要在左侧对齐标题和短文本，在右侧对齐带有超链接的内容。

到目前为止，我已经使用单元格来对齐它们，但至少可以说，它看起来非常丑陋，而且会影响间距。无论我尝试什么，我都无法在没有对方回应的情况下更改双方的内容。是否有可能以另一种方式安排内容，而不是对整个框使用单个单元格并为每一侧分配百分比？我已经在下面上传了一张网站图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>
      Your Personal Guide To Best Hardcore Events
    </title>
    <style type="text/css">
      body {
        background: url(http://webprojects.eecs.qmul.ac.uk/at315/background.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: fixed
      }

      .background {
        display: flex;
        justify-content: center;
      }

      div.transbox {
        margin: 0px;
        background-color: #ffffff;
        border: 1.5px solid black;
        opacity: 0.6;
        filter: alpha(opacity=60);
        width: 100%;
        max-width: 1300px;
      }

    </style>
  </head>

  <body>
    <p align="center">
      <img src="http://webprojects.eecs.qmul.ac.uk/at315/header.png" style="width:70%;" border="0" alt="" />
    </p>
    <div class="background">
      <div class="transbox">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <th width="75%" align="left">
              <h2>
                    Articles:
                  </h2>
            </th>
            <th width="20%" align="center">
              <ul style="list-style: none;">
                <li>
                  <a href="http://webprojects.eecs.qmul.ac.uk/rr305/CourseWork/blog.xml" style="text-decoration:none">Homepage</a>
                  <br />
                  <br />
                </li>
                <li>
                  <small><a href="http://www.qmul.ac.uk" style=
                      "text-decoration:none">Architects</a></small>
                </li>
                <li>
                  <small><a href="https://www.facebook.com" style=
                      "text-decoration:none">Northlane</a></small>
                </li>
                <li>
                  <small><a href="http://www.bbc.co.uk" style=
                      "text-decoration:none">Attila</a></small>
                </li>
              </ul>
            </th>
          </tr>
          <tr>
            <td align="left">
              <h4>
                    <strong>Architects Rocking Brixton</strong>
                  </h4>Read our article about Architects headlining their biggest sold-out UK show!
              <hr />
            </td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td align="left">
              <h4>
                    <strong>Architects Rocking Brixton</strong>
                  </h4>Read our article about Architects headlining their biggest sold-out UK show!
              <hr />
            </td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td align="left">
              <h4>
                    <strong>Architects Rocking Brixton</strong>
                  </h4>Read our article about Architects headlining their biggest sold-out UK show!
              <br />
              <br />
            </td>
          </tr>
        </table>
      </div>
    </div>
  </body>

</html>

Main page of the website

Answer 1

只需更改此标签：

<table style="padding:0 5% " width = "90%" border="0" cellpadding="0" cellspacing="0">

Answer 2

在这种情况下，最好使用 flex 和 max width。这样对响应式设计很好。

.background {
display: flex;
justify-content: center;
}

div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
width: 100%;
max-width: 1000px;
}

更改您的浏览器尺寸，它适用于所有尺寸。最好的部分是，如果屏幕的宽度 < 1000px，则 table 会填满整个屏幕。

如何对齐 HTML 框中的文本，使其不影响每边的间距

How to align text in the box in HTML so that it does not affect the spacing on each side

html

text

alignment

cell

document-body