日期:2014-05-17  浏览次数:20670 次

css基础
html代码:
<div id="serch">
<form id="formSerch" action="#" method="post">
<fieldset>
<legend>电影搜索</legend>
<ul class="serch_box">
<li class="first"><input type="text" id="serchInfo"/></li>
<li><button type="submit" id="btnSerchSubmit"></button></li>
</ul>
</fieldset>
</form>

</div>

css代码:
#head #serch {
border:1px solid #33CCFF;
width:700px;
height:38px;
float:right;
margin-top:19px;
}

#serch legend {
display:none;
}

#serch li {

list-style:none;
float:left;
margin-top:1px;
}

#serch #serchInfo {
border:3px solid #FF6EB8;
height:29px;
width:200px;
}

#serch #btnSerchSubmit {
background:url(../img/serch_logo.jpg) no-repeat;
border:none;
width:81px;
height:35px;
}

问题:
在dreamweaver的设计视窗中文本框和button之间有很大一段空格
而在ie浏览器中却是正常的。
好像是li标签的宽度产生的空格,但是对li标签的宽度设置却不起作用。
请高手解决下,谢谢了。

------解决方案--------------------
标签有默认的margin padding 值
在 style中重置下

* { margin:0; padding:0; }
这样仅仅是 简写的方式,不推荐

楼主可以 搜下 reset css
------解决方案--------------------
探讨

标签有默认的margin padding 值
在 style中重置下

* { margin:0; padding:0; }
这样仅仅是 简写的方式,不推荐

楼主可以 搜下 reset css