css - 更改图片中登录字段的样式

Question

我想以相同的顺序制作登录名和密码字段。当我尝试使用 margin 命令更改 css 文件中的顺序时，它会移动两个字段。

Answer 1

您可以使用CSS float来固定输入相对于彼此及其父元素的位置：

请参阅这个工作小提琴示例！

假设结构如下：

<form method="post" action="#">
  <div class="clear">
    <label>KULLANICI ADI</label>
    <input type="text" value="" name="foo">
  </div>
  <div class="clear">
    <label>SIFRE</label>
    <input type="text" value="" name="bar">
  </div>
</form>

CSS 解决方案是：

input[type="text"] {
  float: right;
}
.clear {
  clear:both;
}

Answer 2

尝试这样的事情。有很多方法可以做到，但这是最直接的。

http://jsfiddle.net/QutGz/1/

不知道想要小提琴的宽度。您可以像这样完成“列”的平衡：

label
{
float:left;
width: 100px;
}

input
{
float:left;
}

​ 将宽度设置为大于最大标签文本的值。