1

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

<!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>
4

4 回答 4

1

我认为你在那里不需要任何高度。只需将整行放入 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;
}

希望这个对你有帮助。

于 2013-06-25T14:09:44.027 回答
1

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;
}
于 2013-06-25T15:09:47.147 回答
1

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

于 2013-06-25T14:02:12.107 回答
1

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

此外，将电子邮件标签包裹在标签中div，就像您对名字/姓氏所做的那样。

于 2013-06-25T14:03:36.197 回答