Question

我正在尝试将包含我网站导航链接的表格行从左对齐移动到右对齐，但无论我编辑什么都没有动作。我最近才开始学习HTML和CSS，所以任何帮助都会受到赞赏。

HTML

    <div id="nav">
    <table>
        <tr>
            <td>
                <a href="index.html">
                    <img src="Images/Home.png"/>
                </a>
            </td>
            <td>
                <a href="Learn.html">
                    <img src="Images/Learn.png"/>
                </a>
            </td>
            <td>
                <a href="Practice.html">
                    <img src="Images/Practice.png"/>
                </a>
            </td>
            <td>
                <a href="About.html">
                    <img src="Images/About.png"/>
                </a>
            </td>
            <td align="right">
                <a href="Donate.html">Donate</a>
            </td>
        </tr>
    </table>
</div>

CSS

#nav {
    width: 100%;
    height: 10%;
    float: right;
    background-color: #47B531;
    margin: 0px;
    padding:0px;
    white-space: nowrap;
}
#nav tr {
    margin: 0px;
    padding: 0px;
    width: 100%;
}
#nav td {
    font-size: 18px;
    margin: 0px;
    padding: 5px;
    text-align: right;
    margin: 0px;
}
#nav img {
    width: 30px;
    height: 30px;
    display: inline;
    padding: 5px;
    margin: 0px;
}

Answer 1

请使用

<table align="right">

而不只是表格标签。

Answer 2

通常，导航菜单是使用列表而不是表格设计的。这是一个非常简单的例子：

<强> HTML：

<div id="nav">
    <ul>
        <li>
            <a href="index.html"><img src="Images/Home.png"/></a>
        </li>
        <li>
            <a href="about.html"><img src="Images/About.png"/></a>
        </li>
        <li>
            <a href="contact.html"><img src="Images/Contact.png"/></a>
        </li>
        <li>
        <a href="Donate.html">Donate</a>
        </li>
    </ul>
</div>

<强> CSS：

#nav ul {
    list-style: none;
}

#nav ul li{
    float:right;
    margin-left: 10px;
}

使用此方法的选项是无穷无尽的，请尝试一下，如果您遇到困难或对此有疑问，请告诉我们。继承人小提琴：http://jsfiddle.net/Q5Vh3/

Answer 3

如果您想要在div元素内右侧的链接，而不更改当前表格的表格单元格渲染，只需添加规则

#nav table { float: right; }

Answer 4

下次使用@ Dave的建议。列表更有效，更容易。但要回答您的问题，您可以使用表格上的align=right来修复它。

看看这个小提琴http://jsfiddle.net/uhLuh/

Answer 5

了解当前的Web标准至关重要。我建议潜入HTML 5＆amp; CSS3。我相信您应该遵循CSS3的HTML 5标准。

以下是理想情况下如何理解HTML5导航元素以及应该让您指向正确方向的基本CSS3元素和属性：）

HTML5
<nav>
 <a href="index.html"><img src="Images/Home.png"/></a> 
 <a href="index.html"><img src="Images/Home.png"/></a>
 <a href="index.html"><img src="Images/Home.png"/></a>
 <a href="index.html"><img src="Images/Home.png"/></a>
</nav>

CSS3
ul { }

nav ul 
{float: right;      *Adjust to suit
 text-align:right;  *Adjust to suit
 list-style: none;} *Adjust to suit

nav ul li { }
nav ul a { }

希望这能帮到你！

如何用css将表格行对齐？

HTML

CSS

5 个答案: