Question

我想创建一个简单的登录表单。我几乎完成了它，但我表中的文字没有向右移动。我正在使用<span>。我的HTML代码就在这里。

<div id="login-container">
<form action="login.php" method="post" >
<table>
    <tbody>
        <tr>
        <td><span>Username:</span></td>
        <td><input type="text" name="username" value="" ></td>
        </tr>
        <tr>
        <td><span>Password</span></td>
        <td><input type="password" name="password" value="" ></td>
    </tr>
        <tr>
        <td></td>
        <td><input type="checkbox" name="remember" value="off">remember me?</td>
    </tr>
        <tr>
        <td></td>
        <td><input type="submit" name="submit" value="Login" id="button"></td>
    </tr>
    </tbody>
</table>

我的CSS就在这里。当我使用float:right时，它会向右移动。

span {
    color:black;
    font-family:"Arial Black", Gadget, sans-serif;
    font-weight:bold;
    font-size:13px;
    text-align:right;
}

Answer 1

text-align属性不适用于内联元素，span是内联元素。因此，text-align属性不适用于它。

如果您不想使用float:right;

您可以使用：

td{
    text-align:right;
}

PS：为特定的td提供 ID 会更聪明，否则所有td都会像你一样对齐请参阅下面的演示。

<强> JSFiddle Demo

Answer 2

<span>仅占用可用文字的宽度，因此将text-align:right分配给span不会有任何区别，您应将其应用于td。

示例：请参阅此链接以更好地了解Span

CSS ：

span { color:black; font-family:"Arial Black", Gadget, sans-serif; font-weight:bold; font-size:13px; } td{text-align:right;}

看到这个小提琴：DEMO
P.S：你的问题不明确，你的标题是＆＃34;它不会成为中心＆＃34;但你的解释说＆＃34;它不会正确＃34;。假设你想要它正确我已经给出了解决方案。

Answer 3

text-align属性不适用于内联元素，默认情况下span元素是内联的。最小的修复是添加

span { display: block }

然而，这些规则是有风险的;您应该使用限制性更强的选择器，但这取决于页面结构。

而不是span，label应该用于辅助功能;但是这并没有改变基本问题，因为label也是内联的。

或者，改为在td元素上设置样式。

为什么我的文本不在HTML表格的中心？

3 个答案: