0

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

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

现在是这个
http://bit.ly/ZLauE1

代码：

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

谢谢

4

2 回答 2

1

尝试float:left;对标签使用 a ，对正确的内容使用嵌套分割float:right;. 你基本上想要一个左右划分。

看看这个小提琴。

于 2013-04-25T20:31:15.033 回答
0

我会改变你的 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>
于 2013-04-25T20:49:36.497 回答