如何对齐 table、HTML 的特定 Table 数据

Question

刚开始做网站，不明白为什么不能带一部分右对齐。代码如下。

代码：

<!DOCTYPE html>
<html style="background-color: black;">
    <head>
        <title>My Portfolio</title>
        <style>
            #navigation-bar {
                background-color: black;
                color: grey;
                font-weight: bold;
                font-family: Script;
                font-size: 25px;
            }
        </style>
    </head>
    <body>
        <div id="navigation-bar">
            <table>
                <tr>
                    <th><img src="https://previews.123rf.com/images/fordzolo/fordzolo1506/fordzolo150600296/41026708-example-white-stamp-text-on-red-backgroud.jpg" height="50px" width="50px"></th>
                    <th><a href="/home" title="Home">Home</a></th>
                    <th><a href="/about" title="About Me">About Me</a></th>
                    <th><a href="/languages" title="Languages">Languages</a></th>
                    <th><a href="/work" title="Previous Work">Previous Work</a></th>
                    <th><a style="text-align: right;" href="https://puginarug.com" title="Beautiful Website">An Amazing Website</a></th>
                </tr>
            </table>
        </div>
    </body>
</html>

很明显，我刚刚开始编写代码，但我试图让最后一个 table header 标签右对齐。但是输出只是在第 5 个 table header 标签旁边显示它。我怎样才能使这个特定的 table header 标签向右移动？

Answer 1

与其将导航栏项目用作 <table> 和 <th>，更好的方法是使用使用 <ul> 和 <li> 标签的列表项目。

像下面这样使用 li:last-child 和 float: right 将解决您的问题。

请遵循以下代码片段：

li {
  display: inline;
  float: left;
}

li:last-child{
    float: right;
}

a {
  display: block;
  padding: 8px;
}

<ul>
   <li><img src="https://previews.123rf.com/images/fordzolo/fordzolo1506/fordzolo150600296/41026708-example-white-stamp-text-on-red-backgroud.jpg" height="50px" width="50px"></li>
   <li><a href="/home" title="Home">Home</a></li>
   <li><a href="/languages" title="Languages">Languages</a></li>
   <li><a href="/work" title="Previous Work">Previous Work</a></li>
   <li><a href="https://puginarug.com" title="Beautiful Website">An Amazing Website</a></li>
</ul>

详情请参考Horizontal navigation bar

如何对齐 table、HTML 的特定 Table 数据

How to Align a specific Table Data of a table, HTML

html

css

html-table

navbar