为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我用float:right 设为首页那一部分没有和表单部分平齐?

为什么我用float:right 设为首页那一部分没有和表单部分平齐?

慕粉4240002 2016-11-29 16:48:07
<div id="header"> <div class="logbar"> <div class="blank12"> </div> <form class="s1" id="form1"> 用户名:<input type="text" value="会员" onFocus="if(value==''){return '会员'}" onBlur="if(value=='会员'){return ''}"> 密码:<input type="text"> <a href="#">用户注册</a> <a href="#">忘记密码</a> </form> <ul class="right"> <li>收藏本站</li> <li>设为首页</li> </ul> </div> css代码: #header{width:960px;margin:0 auto;} #form1{width:650px;line-height:22px;float:left;font-size:15px;display:inline;} .logbar ul{ float:right; width:180px; height:20px; display:inline; } .logbar li{float:right; list-style:none; text-align:right; line-height:22px; width:75px; } .logbar{width:960px; height:32px; } 
查看完整描述

5 回答

?
CHFFOPSAIE

TA贡献3条经验 获得超0个赞

给ul一个margin:0;就行了。

查看完整回答
反对 回复 2016-11-30
?
qq_啊啦嘞_0

TA贡献8条经验 获得超50个赞

1)ul标签有默认的margin值,因此需要设置ul{margin:0;}

    建议:在写CSS样式的开始,将所有的默认样式清除掉,例如h1-h6,ul,li,input等标签;

2)我的代码

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>自动展开</title>

    <style type="text/css">   /*设置广告和正文的CSS样式*/

  #header{width:960px;margin:0 auto;} 

  #form1{width:650px;line-height:22px;float:left;font-size:15px;display:inline;} 

  .logbar ul{ float:right; width:180px; height:20px; display:inline; } 

  .logbar li{float:right; list-style:none; text-align:right; line-height:22px; width:75px; } 

  .logbar{width:960px; height:32px; } 

  ul,li,form{margin:0;}

    </style>

    

</head>

<body>

<div class="logbar"> 

<div class="blank12"> </div> 

<form class="s1" id="form1"> 用户名:<input type="text" value="会员" onFocus="if(value==''){return '会员'}" onBlur="if(value=='会员'){return ''}"> 

密码:<input type="text"> 

<a href="#">用户注册</a> <a href="#">忘记密码</a> </form>

 <ul class="right"> <li>收藏本站</li> <li>设为首页</li> </ul> </div>


</body>

</html>

//img1.sycdn.imooc.com//583dab430001259f09040560.jpg

查看完整回答
反对 回复 2016-11-30
?
weibo_发呆小贤_0

TA贡献3条经验 获得超0个赞


不知道你代码是怎么写的,但是如果你是设为首页在表单下面,即使是浮动了也还是在他下面,如果你左边的也左浮动应该就在同一行了

查看完整回答
反对 回复 2016-11-29
  • 慕粉4240002
    慕粉4240002
    <div id="header"> <div class="logbar"> <div class="blank12"> </div> <form class="s1" id="form1"> 用户名:<input type="text" value="会员" onFocus="if(value==''){return '会员'}" onBlur="if(value=='会员'){return ''}"> 密码:<input type="text"> <a href="#">用户注册</a> <a href="#">忘记密码</a> </form> <ul class="right"> <li>收藏本站</li> <li>设为首页</li> </ul> </div> css代码: #header{width:960px;margin:0 auto;} #form1{width:650px;line-height:22px;float:left;font-size:15px;display:inline;} .logbar ul{ float:right; width:180px; height:20px; display:inline; } .logbar li{float:right; list-style:none; text-align:right; line-height:22px; width:75px; } .logbar{width:960px; height:32px; } 试了好久,实在不知道问题出在哪里,希望能帮帮忙看看
?
慕粉4240002

TA贡献1条经验 获得超0个赞

页头部分//img1.sycdn.imooc.com//583d417c00015d8509760061.jpg

查看完整回答
反对 回复 2016-11-29
  • 陈小窝
    陈小窝
    你的贴代码,贴图片,要不然别人怎么回答你的问题
?
陈小窝

TA贡献13条经验 获得超3个赞

哪里的

查看完整回答
反对 回复 2016-11-29
  • 慕粉4240002
    慕粉4240002
    #header{width:960px;margin:0 auto;} .logbar{width:960px; height:32px; } #form1{width:650px;line-height:22px;float:left;font-size:15px;} .logbar ul{ float:right; width:180px; height:20px; } .logbar li{float:right; list-style:none; text-align:right; line-height:22px; width:75px; } 这是我写的CSS代码
  • 5 回答
  • 0 关注
  • 2248 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信