Question

这是我的代码：

<form>
    <span style="float: left; width: 80px;">First name:</span> <input type="text"      name="firstname"><br />
    <span style="float: left; width: 80px;">Last name:</span> <input type="text" name="lastname"><br />
    <span style="float: left; width: 80px;">Mail:</span> <input type="text" name="mail"><br />
    <span style="float: left; width: 80px;">Password:</span></span> <input type="password" name="pwd">
</form>

我不知道为什么class无效。我尝试在CSS文件中创建.floatext类，而不是重复键入style=""。

.floatext {
  float: left;
  width: 80px;
}

然后我试着这样做：

<form>
    <span class="floatext">First name:</span> <input type="text" name="firstname"><br />
    <span sclass="floatext">Last name:</span> <input type="text" name="lastname"><br />
    <span class="floatext">Mail:</span> <input type="text" name="mail"><br />
    <span class="floatext">Password:</span></span> <input type="password" name="pwd">
</form>

但它不起作用。只有使用style的代码才有效....为什么会这样？

Answer 1

我能看到的唯一问题是，您class个属性之一拼错为sclass。否则它似乎适合我（使用this little tool测试）。

Answer 2

试试这个

   <span class="floatext">First name:</span> <input type="text" name="firstname"><br />
        <span class="floatext">Last name:</span> <input type="text" name="lastname"><br />
        <span class="floatext">Mail:</span> <input type="text" name="mail"><br />
        <span class="floatext">Password:</span></span> <input type="password" name="pwd">
    </form>

删除代码中类的前面部分。

Answer 3

点击此链接fiddle以导航到小提琴。如果您修改头部内部样式内的宽度并在左上角点击运行，那么您将看到右下角反映的新输出。

<html>
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
.floatext {
  float: left;
  width: 80px;
}</style>
</head>

<body>
    <form>
        <span class="floatext">First name:</span> <input type="text" name="firstname"><br />
        <span class="floatext">Last name:</span> <input type="text" name="lastname"><br />
        <span class="floatext">Mail:</span> <input type="text" name="mail"><br />
        <span class="floatext">Password:</span></span> <input type="password" name="pwd">
    </form>
</body>
</html>

如果您的CSS单独有一个文件，那么在“”中你会有如下内容：

<head>
    <link rel="stylesheet" type="text/css" media="screen" href="/Style/myFile.css" />
</head>

使用输入框缩短我的代码

3 个答案: