如何对齐表格的特定表格数据，HTML

【问题标题】：How to Align a specific Table Data of a table, HTML如何对齐表格的特定表格数据，HTML
【发布时间】：2021-11-13 01:52:09
【问题描述】：

我刚开始做一个网站，我不明白为什么我不能把它的一部分放在右边。代码如下。

代码：

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

很明显，我刚刚开始编写此代码，但我正试图让最后一个表头标记与右侧对齐。但输出只是显示在第 5 个表头标记旁边。如何使这个特定的表头标签向右？

【问题讨论】：

我可以看到这是一个导航栏，所以您可以将它用作
元素的集合而不是使用 table，然后根据您的需要设置它的样式吗？这是制作导航栏的更好方法。

我已将这种方法粘贴到解决方案中。

标签： html css html-table navbar

【解决方案1】：

与其将导航栏项目用作<table> 和<th>，不如使用带有<ul> 和<li> 标签的列表项。

使用li:last-child 和float: right 可以解决您的问题。

请按照以下代码sn-ps：

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。

【讨论】：

如有任何疑问，请告诉我。谢谢！
@AndrewMorton 是的，没错。更新了我的解决方案。谢谢！