div错位问题

<divclass="headerBox"><divclass="headercomWidth"><divclass="logofl"><ahref="#"><imgsr... <div class="headerBox"> <div class="header comWidth"> <div class="logo fl"> <a href="#"><img src="images/logo.png"></a> </div> <div class="searchBox "> <input type="text" class="search_input fl"> <input type="button" class="search_btn fl"> </div> <ul class="menu fr"> <li> 登陆|注册 </li> <li> 观看记录 </li> <li> 上穿 </li> </ul> </div></div></body>

当给<div class="searchBox fl "> <input type="text" class="search_input fl"> <input type="button" class="search_btn fl"> </div>
加上左浮动就正常了

因为优酷图片是左浮动的，登陆注册是右浮动的，按理说搜索框应该在优酷图片的下边

下面是css文件
/*头部的小部分*/.headerBox{background: #f5f5f5;height:60px;}.logo{padding-top: 19px; width: 320px;}.searchBox{width: 321px;margin-top: 50px;}.search_input{width: 228px;height: 36px;line-height: 36px;border: 2px; border: solid #9f9f9f;border-right: none;}.search_btn{width: 90px;height: 40px;background:url(../images/search_btn.jpg) left top no-repeat; }.search_show{background: #f5f5f5;}/*sousuojiaohu*/.search_hover{border-color: #3eabff;}/*通用样式*/.comWidth{width:970px;margin: 0 auto; }.fr{float: right;}.fl{float: left;} 展开





 我来答

1个回答

#热议# 应届生在签三方时要注意什么？

大叔不要走
2014-08-12

知道答主

回答量：14

采纳率：0%

帮助的人：10.6万

我也去答题访问个人页

关注

展开全部

你的按理说是错误的，搜索框在logo和登陆注册之间，logo向左漂浮，ul像右漂浮，搜索框没有漂浮，他只能在两者之间
你要是想让它在logo的下面就把它和logo放在一个容器里，让后让这个容器向左漂浮，然后ul像右漂浮

<!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 type="text/css">
/*头部的小部分*/
.headerBox{background: #f5f5f5;height:60px;}
.logo{padding-top: 19px; width: 320px;}
.searchBox{width: 321px;margin-top: 50px;}
.search_input{width: 228px;height: 36px;line-height: 36px;border: 2px; border: solid #9f9f9f;border-right: none;}
.search_btn{width: 90px;height: 40px;background:url(../images/search_btn.jpg) left top no-repeat; }
.search_show{background: #f5f5f5;}
/*sousuojiaohu*/
.search_hover{border-color: #3eabff;}
/*通用样式*/
.comWidth{width:970px;margin: 0 auto; }
.fr{float: right; width:200px;}

.fl{float: left;}
</style>
</head>

<body>
<div class="headerBox">
<div class="header comWidth">
<div class="logo fl">
<a href="#"><img src="images/logo.png"></a>
<div class="searchBox ">
<input type="text" class="search_input fl">
<input type="button" class="search_btn fl">
</div>
</div>

<ul class="menu fr">
<li>
登陆|注册
</li>
<li>
观看记录
</li>
<li>
上传
</li>
</ul>
</div>
</div>
</body>

</html>
你想要的结果是这样的吧

本回答由提问者推荐

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

div错位问题

其他类似问题

为你推荐：