问个css的问题哈,(其实原问题是表单不能嵌套)

小白小霸王 发布于 2012/07/28 13:54
阅读 388
收藏 0
代码是这样子的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style>
	.f1{ margin:20px; border:1px solid red; width:500px;
		}
	.f2{ margin:20px; border:1px solid  #0F0;width:500px;
		}
</style> 

</head>
<body>
	 <div class="f1">
     <form>
     	表单1
        <input  type="text" value="文本1"  />
     </form>
     </div>
    
    <div class="f2">
     <form>     	
     	 表单2
        <input  type="text" value="文本2"  />
     </form>
	</div> 
</body>
</html>



但是我想要界面显示的是下面样子的,有什么思路吗?






以下是问题补充:

@小白小霸王:还有中可能是看上去表单1中有两个input,两个input中间有一个表单2,怎么做呢?前提是html实际上表单1和表单2是并列的 (2012/07/28 14:38)
加载中
0
0
wartskcaj
wartskcaj
就是css的问题嘛,样式不一样
小白小霸王
小白小霸王
回复 @jackstraw : 我的需求是 因为表单字段顺序有要求,在中间位置是一个 swfupload(本身是一个form),这样就形成了form嵌套。 这样的话swfupload下面的字段传递不过去。(现在是form提交) -- 怎么才能实现 字段顺序的要求,又能传递表单中所有的字段呢?
wartskcaj
wartskcaj
回复 @光头程序员 : 你还不如直接说出需求,这样弄出的效果感觉没什么意义啊
小白小霸王
小白小霸王
回复 @jackstraw : 哎呀呀,不是这样啦,还有中可能是看上去表单一种两个input,两个input中间有一个表单2,怎么做呢?前提是html实际上表单1和表单2是并列的
wartskcaj
wartskcaj
回复 @光头程序员 : http://www.osctools.net/jsbin/punhyovk/1/edit#javascript,html,live
小白小霸王
小白小霸王
是啊 是啊 怎么写啊
0
铂金小猪
铂金小猪
骚年,你这是要闹喃样呢??两个DIV都是并列的了,你咋嵌套呢····
小白小霸王
小白小霸王
是啊!我要的就是看上去嵌套 但是实际上并列
0
tsl0922
tsl0922
给第二个div加个padding或者给第二个form加个margin不知可否满足你的要求。
.f2{ margin:20px; padding-left:20px; border:1px solid #0F0; width:500px;}

tsl0922
tsl0922
不好意思,好像理解错了。重新做了个,看下可以不:http://www.osctools.net/jsbin/uwyrbxsd/1
0
kong_resty
kong_resty
可以用绝对定位来实现
小白小霸王
小白小霸王
我绝对了一会子了 老是乱 --!
0
JustForFly
JustForFly

引用来自“铂金小猪”的答案

骚年,你这是要闹喃样呢??两个DIV都是并列的了,你咋嵌套呢····

少年,不知道你为什么一定要这样写,其实嵌套一下就很好解决了。

不过,既然你有你的用意,下面是我写的,你参考一下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style>
	.f1{ margin:20px; border:1px solid red; width:500px; height:80px;background-color:red;
		}
	.f2{ margin:-60px 0 0 40px; border:1px solid  #0F0;width:500px;background-color:green;
		}
</style> 

</head>
<body>
	 <div class="f1">
     <form>
     	表单1
        <input  type="text" value="文本1"  />
     </form>
     </div>
    
    <div class="f2">
     <form>     	
     	 表单2
        <input  type="text" value="文本2"  />
     </form>
	</div> 
</body>
</html>

0
Jeky
Jeky
我的建议是换种思路:

用js来控制提交表单,这样你就无所谓是嵌套还是并列了,然后div嵌套就很好写了

小白小霸王
小白小霸王
O了 ,就这样好了。js提取参数,不用submit了。
Jeky
Jeky
回复 @光头程序员 : 写个函数进行整体提取就行了 你这样弄日后添加新内容会很麻烦 浏览器兼容性也可以有问题
小白小霸王
小白小霸王
是啊 一个字段一个字段的去提取 很麻烦的 ,这样也行
0
Andre.Z
Andre.Z

为什么不把你的f2直接丢到第一个form的下面呢?
直接丢过去不就是你要的那种形式么?

0
wartskcaj
wartskcaj

引用来自“jackstraw”的答案

就是css的问题嘛,样式不一样

对表单字段有要求?还没见过这种需求呢

非得按某种顺序的话,用js获取表单里的值,想按什么顺序都成,只不多是用js控制提交表单罢了

中间位置是一个 swfupload

这个是异步上传的,可以不跟那个表单放一起

你遇到的问题就是因为界面布局的问题造成的,界面可以改的,提交的数据不能依赖于界面元素的顺序呀

 

小白小霸王
小白小霸王
我也想改,人家不让改顺序,说什么改了就不给钱,
返回顶部
顶部