Question

基本上我想创建一个表单，它将所有文本放在一个“列”中，所有输入字段放在另一个表中，所以它看起来不错。它几乎可以工作，问题是当我创建一个新行时，该行继续从前一行的宽度。我将在下面发布源代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .asd {       
            width: 100px;
            height: 50px;
             float:left;
        }
        .op {
        float:left
        }
    </style>
</head>
<body>
    <form action="demo_form.asp" autocomplete="on">
  <div class="asd">First name:</div><input type="text" name="fname" class="op"><br />
  <div class="asd">Last name:</div> <input type="text" name="lname" class="op"><br />
  E-mail: <input type="email" name="email" autocomplete="off"><br />
  <input type="submit">
</form>
</body>
</html>

Answer 1

您需要在每行后添加样式为clear: both的元素。这将重置浮动位置，以便下一个元素一直定位到左侧。

Answer 2

不要在CSS中使用float: left;，而是在两个类上使用display: inline-block;。

此外，将电子邮件标签包装在div标记中，就像您为姓/名做的那样。

Answer 3

我认为你不需要任何高度。只需将整行放在div中并将元素浮动到内部..

我的演示： http://jsfiddle.net/goodfriend/pt4Ua/20/

HTML：

<form action="demo_form.asp" autocomplete="on">
   <div class="line"><span class="asd">First name:</span><input type="text" name="fname" /></div>
   <div class="line"><span class="asd">Last name:</span> <input type="text" name="lname"  /></div>
   <div class="line"><span class="asd">E-mail:</span> <input type="email" name="email" autocomplete="off"  /></div>
   <div class="line"><input type="submit" /></div>
</form>

CSS：

.asd {
    width: 100px;
    float:left;
}
.line {
    margin:7px;
    display:block;
}

希望这有点帮助。

Answer 4

1）使用表单html元素清理html 2）简化css
3）享受

JSFiddle：http://jsfiddle.net/Bushwazi/XHtUL/

HTML：

<form action="demo_form.asp" autocomplete="on">
    <fieldset>
        <label for="fname">First name:</label>
        <input type="text" name="fname" class="op">
    </fieldset>
    <fieldset>
        <label for="lname">Last name:</label>
        <input type="text" name="lname">
    </fieldset>
    <fieldset>
        <label for="email">E-mail:</label>
        <input type="email" name="email" autocomplete="off">
    </fieldset>
    <input type="submit">
</form>

CSS：

form {
    width:100%;
}
fieldset {
    width:100%;
    display:block;
    padding:0.5em 0;
    border:none;
}
label {
    display:inline-block;
    width:40%;
    padding:0 5%;
}
input[type=text],
input[type=email] {
    height:100%;
    width:45%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}
input[type=submit] {
    float:right;
    margin:0 5% 0 0;
}

使用css3设置表单样式

4 个答案:

HTML：

CSS：