Question

我有基本的html表单与css元素，我无法弄清楚为什么CSS代码不应用，什么都不做。有我的代码：

<!doctype html>
      <html>
      <head>
      <title> A basic form </title>
      <style type ="text/css">

      .form-field{
          clear: both;
          padding: 10px;
          width: 350px;
      }

      .form-field label{

          float: left;
          width: 450px;
          text-align: right;
          font-size: xx-small;
      }

      .form-field input{

          float: right;
          width: 150px;
          text-align: ;
      }

      #submit{


          font-size: larger;
          text-align: center;
      }


      </style>

      </head>

      <body>
      <h1> A basic form </h1>
      <hr> 
      <form action="#">
      <fieldset >
        <legend>Form Information </legend>
        <div> 
            <label for="username"> Name :</label>
            <input type="text" id="username" name="username">
        </div>
        <div>
        <label form="email"> E-mail address:</label>
        <input type="text" id="username" name="email">
        </div>
        <div>
            <input id="submit" type="submit" name="submit"
            value="Send Form">
        </div>
        <div>
        <input type="reset" name="reset" value="Clear Form">
        </div>

      </fieldset>
      </form>
      </body>
      </html>

实际上，它确实对我的提交按钮进行了更改，但是表单本身仍然具有基本（左）对齐方式。我错过了什么？

任何帮助将不胜感激，谢谢！

Answer 1

我已经编辑了你的HTML。请看一下this fiddle

我刚刚添加了

<fieldset class="form-field">

Answer 2

您的风格适用于“form-field”类，但在html代码中没有提及。

将表单标记编辑为 -

<form action="#" class="form-field">

然后你就能看到变化。

Answer 3

这将为你做到。 Fiddle here

fieldset {text-align:right;}

Answer 4

制作如下表格：

<form class="form" action="#">

添加此css： -

.form{
     text-align: right;
  }

Answer 5

CSS代码未应用，因为HTML元素具有类＆＃34; form-field＆＃34;你尝试风格的东西并不存在。您需要将该类应用于父元素，以便能够设置标签和输入的样式。

不能应用CSS元素来使表单右对齐

5 个答案: