打印

[讨论] 出道布局测试题哈，用兴趣的看看，灰常简单

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 64 天

1^# 大中小发表于 2008-5-29 19:01

看看下面的代码，测试目的是让那个input输入框宽带自适应为100%，现在它吧容器给撑开了，可以明显看出不EMPTY要长处一点来。

问题：怎么解决？？？

要求：只是IE和FF下测试通过

提示：您可以先修改部分代码再运行

Anti W3C

TOP

做西部数码代理.Cn1元国际45元

Ellis

初级会员

帖子: 250
体力: 72
威望: 0
离线: 1 天

2^# 大中小发表于 2008-5-29 20:12

<!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>Intput</title>
<style type="text/css">
.list {
    border: 1px solid #666;
    background-color: #FCFAE6;
    padding: 5px;
}
.EmForm_item {
    background-color: blue;
    margin:5px;
    padding-top:5px;
}
.EmForm_item_input {
    background-color: #ccc;
}
</style>
</head>
<body>
<div style="width: 550px; margin: auto auto;">
    <div class="list">   
        <div class="EmForm_item">
            <div class="EmForm_item_input">
                EMPTY
            </div>
        </div>       
        <div class="EmForm_item">
            <div class="EmForm_item_input" style="width:527px;border-right:1px solid #A5ACB2;overflow:hidden;">
                <input type='text' value="test"  style="width: 100%;margin-left:0!important;margin-left:-5px;" />
            </div>
        </div>
    </div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

【美橙超级G空间】688元绑定10个子目录 | 500M免费网盘空间，文件永久保留，专业服务高端设计人员

zidanezhicong

我爱阿仙奴

高级会员

帖子: 441
体力: 883
威望: 0
当前: 广东深圳
离线: 12 天

专长 前端制作

3^# 大中小发表于 2008-5-29 20:26

input之所以会长了一点，ie6把容器给撑开了，ie7，FF会延伸出来。主要是因为它的border，当你将input的border设为0，效果就正常了。
另外，你也可以将input的width设为99%。效果也正常

我爱阿仙奴！

TOP

请大家尊重和保护奥运知识产权。

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 64 天

4^# 大中小发表于 2008-5-29 22:05

2楼的用了固定宽度，不行，要求自适应的

3楼：道理我知道，不过，border设为0，这个算不上解决方案吧，代价太大
另外：99%还是不能算精确对齐啊

Anti W3C

TOP

您知道经典哪些会员写过书的吗？

您知道互联网职业和技能有哪些吗？

您知道网站运营核心是什么吗？

zidanezhicong

我爱阿仙奴

高级会员

帖子: 441
体力: 883
威望: 0
当前: 广东深圳
离线: 12 天

专长 前端制作

5^# 大中小发表于 2008-5-29 22:47

其实有一个办法是将input的border设为0，再将input的父元素的border设为黑色1px的线，代替input的border，本人没试过，楼主可以试下！
不过看楼主的留言，看到楼主好像是追求完美的人，这个很好，不过还是多关注根本的东西！楼主的代码结构与样式相夹杂，还出现了“多div症”！

我爱阿仙奴！

TOP

zerty

新手上路

帖子: 37
体力: 49
威望: 0
离线: 1 天

6^# 大中小发表于 2008-5-30 00:14

光是input还好解决，要是再加上select，textarea要对齐就有的烦了

可以注册6位以下ID了？

TOP

cycloned

程让

银牌会员

帖子: 1269
体力: 2992
威望: 0

专长 网页设计,前端制作,UE

7^# 大中小发表于 2008-5-30 08:45

引用:

原帖由 zerty 于 2008-5-30 00:14 发表
光是input还好解决，要是再加上select，textarea要对齐就有的烦了

table是不是好解决

前端开发

TOP

zerty

新手上路

帖子: 37
体力: 49
威望: 0
离线: 1 天

8^# 大中小发表于 2008-5-30 09:08

引用:

原帖由 cycloned 于 2008-5-30 08:45 发表

table是不是好解决

是说宽度。同样100px，这3个控件显示的实际宽度各不相同。。。

可以注册6位以下ID了？

TOP

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 64 天

9^# 大中小发表于 2008-5-30 09:22

table是不是好解决
table也不行的，还是有误差的

虽然看着是2PX，但有时很明显，特别是需要上下对齐时

！楼主的代码结构与样式相夹杂，还出现了“多div症”！这些都是为了测试方便

Anti W3C

TOP

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 64 天

10^# 大中小发表于 2008-5-30 09:25

实际上我在做这个东西，一个PHP的表单自动生成系统，需要足够的扩展性和自适应能力

我用了2天时间，发现这个2px的误差，除了去除input的边框外好像没有别的解决办法了

不过去了边框还有模拟边框太麻烦了～～～

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

Anti W3C

TOP

Ellis

初级会员

帖子: 250
体力: 72
威望: 0
离线: 1 天

11^# 大中小发表于 2008-5-30 09:46

引用:

原帖由 kometo 于 2008-5-29 22:05 发表
2楼的用了固定宽度，不行，要求自适应的

3楼：道理我知道，不过，border设为0，这个算不上解决方案吧，代价太大
另外：99%还是不能算精确对齐啊

我没给input加固定宽度啊，外层总会有一个宽度的

那你说说你的做法吧

TOP

phantom

林小志

版主

帖子: 1406
体力: 1620
威望: 4
当前: 广东深圳

专长 网页设计,前端制作

12^# 大中小发表于 2008-5-30 09:47

<!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>Intput</title>
<style type="text/css">
.list {
    border: 1px solid #666;
    background-color: #FCFAE6;
    padding: 5px;
height:auto;
min-height:10px !important;float:left;
}
.EmForm_item {
    background-color: blue;
    margin:5px;
    padding-top:5px;
}
.EmForm_item_input {
    background-color: #ccc;
}
</style>
</head>
<body>
<div style="width: 550px; margin: auto auto;">
    <div class="list">
    
        <div class="EmForm_item">
            <div class="EmForm_item_input">
                EMPTY
            </div>
        </div>
        
        <div class="EmForm_item">
            <div class="EmForm_item_input" style="float:left;">
                <input type='text' value="test"  style="width: 100%" />
            </div>
        </div>
    </div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

简单补充一下：用float来让内容宽度自适应。只在IE7下试过。

[ 本帖最后由 phantom 于 2008-5-30 09:48 编辑 ]

重构页面之前先重构自我

TOP

Ellis

初级会员

帖子: 250
体力: 72
威望: 0
离线: 1 天

13^# 大中小发表于 2008-5-30 10:01

引用:

原帖由 phantom 于 2008-5-30 09:47 发表
[html]

Intput

.list {
border: 1px solid #666;
background-color: #FCFAE6;
padding: 5px;
height:auto;
min-height:10px !important;float:left;
}
.EmForm_item {

backgrou ...

。。。。。。。。。。。

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP

kometo [楼主]

初级会员

帖子: 66
体力: 154
威望: 0
离线: 64 天

14^# 大中小发表于 2008-6-6 20:48

引用:

原帖由 phantom 于 2008-5-30 09:47 发表
[html]

Intput

.list {
border: 1px solid #666;
background-color: #FCFAE6;
padding: 5px;
height:auto;
min-height:10px !important;float:left;
}
.EmForm_item {

backgrou ...

非常奇怪的结果，似乎满足要求了，可是 WHY？

很难理解

Anti W3C

TOP

tudou527

地瓜

中级会员

帖子: 109
体力: 202
威望: 1
当前: 河北邢台
离线: 7 天

15^# 大中小发表于 2008-6-8 15:38

input不都是在label标签里面的吗？为什么不用label来模拟input边框呢？IE下很奇怪的是lable设置1px的内补丁的时候真实上、下内补丁是2px，需要hack帮下忙。

提示：您可以先修改部分代码再运行

[ 本帖最后由 tudou527 于 2008-6-8 15:43 编辑 ]

TOP