Question

尝试创建一个没有表有几个问题的表单。任何帮助将不胜感激。

有人可以告诉我如何达到这个目标 http://bit.ly/Y7q7Hu

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
<style>


.myfields label, .myfields input{
  display:inline-block;
}

.myfields label {
  width:200px; 
  vertical-align: top;
}
</style>

</head>
<body>
<form>
<fieldset class="myfields">
                <div>
                    <label>Label 1<font color="red">*</font>:</label>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius elit eu metus malesuada malesuada. Praesent varius velit a libero varius congue. Donec fringilla nulla id sapien accumsan tincidunt in vel orci. Nam malesuada risus et mauris hendrerit tempus. Sed tincidunt fermentum tortor eget auctor. Donec at mauris non mi lobortis mollis. Vestibulum vitae enim massa, et rutrum ligula. Aliquam tempor rhoncus enim vitae porttitor.
                    <input id="agreement" type="checkbox">Accept
                </div>  

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

感谢

Answer 1

尝试使用float:left;作为标签，并使用嵌套分区作为float:right;的正确内容。你基本上想要一个左右分裂。

看看这个fiddle。

Answer 2

我会改变div的布局方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
<style>
fieldset{border:none;}

.myfields label, .myfields input{
  display:inline-block;
}

.myfields label {
  width:200px; 
  vertical-align: top;
}
</style>

</head>
<body>
<form>
<fieldset class="myfields">
                <div style="float:left;height:300px;width:100px;">
                    <label style="float:left;">Label 1<font color="red">*</font>:</label>
                </div>
                    <div style="width:300px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius elit eu metus malesuada malesuada. Praesent varius velit a libero varius congue. Donec fringilla nulla id sapien accumsan tincidunt in vel orci. Nam malesuada risus et mauris hendrerit tempus. Sed tincidunt fermentum tortor eget auctor. Donec at mauris non mi lobortis mollis. Vestibulum vitae enim massa, et rutrum ligula. Aliquam tempor rhoncus enim vitae porttitor.

                        <div><input id="agreement" type="checkbox">Accept</div>
                   </div>
            </fieldset>
        </form> 
</body>

CSS对齐标签+字段+文本

2 个答案: