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

我的智能搜素框没有和输入框之间有间隔,怎样才能让它拼接到一起?

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="UTF-8">

<title>bing search</title>

<link rel="stylesheet" type="text/css" href="test.css">

</head>

<body>

<div class="bg">

<div class="search-box">

<div class="logo"></div>

<form class="search-form" id="search-form" action="https://cn.bing.com/search" target="_blank">

<input type="text" class="search-input-text" name="q" id="search-input" autocomplete="off"/>

<input type="submit" value="" class="search-input-button"/>

</form>

</div>


</div>

<div class="suggest" id="search-suggest" style="display:none">

<ul>

<li>手机</li>

<li>手机游戏</li>

<li>手机APP</li>

<li>手机铃声</li>

<li>手机主题</li>

</ul>

</div>


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

<script type="text/javascript">

$('#search-input').bind('keyup',function(){

$('#search-suggest').show().css({

top:$('#search-form').offset().top+$('#search-form').height()+5,

left:$('#search-form').offset().left,

position:'absolute'

});

})

</script>

</body>

</html>

  


   body{

background:#333;

}

.bg{

background:url(image/river.jpg)no-repeat center center;

width:100%;

height:768px;

position:relative;

}

.logo{

background:url(image/logo.png);

width:107px;

height:53px;

margin-left:100px;

margin-bottom:40px;


}

.search-input-text{

border:0;

float:left;

height:27px;

width:350px;

line-height:27px;

outline:none;

}

.search-input-button{

border:0;/*去掉边框的颜色*/

background:url(image/search-button.png);

width:29px;

height:29px;

float:left;

}


.form{

float:left;

padding:5px;

background-color:#fff;

}

.search-box{

position:absolute;

top:200px;

left:400px;

}

.search-form{

width:388px;

height:39px;

}

.suggest{

width:382px;

background-color:#fff;

border:1px solid #999;

}

.suggest ul{

list-style:none;

margin:0;

padding:0;

}

.suggest ul li{

margin:8px;

font-size:14px;

line-height:25px;

cursor:pointer;

}

.suggest ul li:hover{

text-decoration:underline;

background-color:#e5e5e5;


}


正在回答

1 回答

因为你.search-form的height是39px,而.search-input-text的height是27px,.search-input-button的height是29px,.search-form里面的高度没有利用完全,底部是空的,所以会空出一些距离,两个办法:一是将三个高度设置一致,jQuery代码中再稍微调一下;二是不设置.search-form的height属性,直接在jQuery代码中多调整一些距离。(因为.search-input-text和.search-input-button是浮动的,不能用撑开父元素的方法自动设置.search-form的高度,jQuery代码中读取的height是0,所以第二种方法需要调整多一些)。另外我好像没找到.form在哪里?

0 回复 有任何疑惑可以回复我~

举报

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

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

进入课程

我的智能搜素框没有和输入框之间有间隔,怎样才能让它拼接到一起?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信