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

到底是那出了问题 为什么搜索框跟输入框没有对齐??

<style>

*{padding:0px;margin:0px;}

ul li{list-style:none;}

.one11{width:300px;height:300px;top:100px;left:200px;border:2px solid red;

       position:relative;background-color:yellow;}

.two22{width:50px;height:50px;float:left;}

.two22 img{display:block;width:50px;height:50px;}

.two22 form{float:left;background-color:red;margin-left:5px;position:relative;}

.three11{border:0px;float:left;height:50px;width:150px;line-height:50px;outline:none;}

.three22{border:0px;background-image:url(a123.png);width:50px;height:50px;float:left;}

.gogo{width:199px;background:#fff;border:1px solid blue;display:none;}

.gogo ul li{font-size:15px;line-height:30px;padding:0 0 0 3px;cursor:pointer;}

.gogo ul li:hover{background-color:#437200}


</style>

</head>

<body>

<div class="one11">

<div class="two22"><img src="a123.png"></div>

<form  class="aaa" id="aaa" target="_blank" action="file:///C:/Users/Administrator/Desktop/%E6%90%9C%E7%B4%A2%E5%89%AF%E6%9C%AC.html">

<input type="text" class="three11" id="qqqq" name="q" autocomplete="off "/>

<input type="submit" class="three22" id="xiao" value=""/>

</form>

</div>

<div class="gogo" id="gogo">

<ul>

<li>搜索结果1</li>

<li>搜索结果2</li>

<li>搜索结果3</li>

</ul>

</div>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

var lao=$("#qqqq").val();

$.get('http://api.bing.com/qsonhs.asp?q='+lao,function(){},'json');

$("#qqqq").bind('keyup',function(){

 $("#gogo").show().css({

 top:$('#aaa').offset().top+$('#aaa').height(),

 left:$('#aaa').offset().left,

 position:'absolute'

 });

})

</script>

</body>

https://img1.sycdn.imooc.com//5bfeb3760001de1404020350.jpg然后输入内容了以后

https://img1.sycdn.imooc.com//5bfeb38e0001f53503810228.jpg

正在回答

举报

0/150
提交
取消
搜索框制作
  • 参与学习       66012    人
  • 解答问题       463    个

本课程从简入深讲解搜索框的制作,学习JQ与JS实现Ajax技术的不同点

进入课程

到底是那出了问题 为什么搜索框跟输入框没有对齐??

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号