网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
css吧 关注：63,452贴子：458,624
  • 12回复贴，共1页

模仿百度界面练习，但textinput和百度一下按钮死活放不到一行啊

<!DOCTYPE>
<html>
<head>
<title>百度两下，你就知道</title>
<style>
div{}
.rig{right:0;position:absolute;top:0;margin:19px 0 5px 0;padding:0 96px 0 0;}
.lg{text-align:center;margin-left:auto;margin-right:auto}
.ser{width:540;height:34;border:1px solid #38f;}
input{float:left}
.sertxt{width:526px;height:22px;margin:7px;border:none;outline:medium;}
.doser{width:100;height:37;background-color:#38f;color:white;font-size:15;border:none;}
a{}.leader{text-decoration:underline;color:#0f0f0f;font-size:13;margin-left:15px;line-height:24px;float:left}
a.leader:hover{color:#0000ff}
.leadmore{background-color:#38f;color:#ffffff;line-height:24px;float:left;margin-left:15px;font-size:13px;position:absolute;width:60px;text-align:center}
</style>
</head>
<body>
<div class="rig">
<a href="" class="leader"><b>新闻</b></a>
<a href="" class="leader"><b>hao123</b></a>
<a href="" class="leader"><b>地图</b></a>
<a href="" class="leader"><b>视频</b></a>
<a href="" class="leader"><b>贴吧</b></a>
<a href="" class="leader">登录</a>
<a class="leader">设置</a>
<a class="leadmore">更多产品</a>
</div>
<div class="lg" >
<img src="
" name="baidulogo" width="270"/>
</div>
<div class="ser">
<input type="text" name="searchtext" class="sertxt">
<input type="submit" name="bdsubmit" class="doser" value="百度两下">
</div>
</body>
</html>



昨天刚接触css，html这些，有太幼稚的地方望大神指出。谢谢大家！


再学习一次


加个align:center,就可以居中，输入框和按钮都加个float:left就可以摆在同一行了


我有代码


<!DOCTYPE html>
<html><!--STATUS OK-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style type="text/css">
body {
margin: 0;
}
form {
position: relative;
margin: 12px 15px 91px 15px;
height: 41px;
}
.wordWrap{
margin-right: 85px;
}
.bn {
border: 1px solid #787878;
font-size: 16px;
font-weight: bold;
height: 41px;
letter-spacing: -1px;
line-height: 41px;
padding: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 72px;
-webkit-appearance: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 0;
border-radius: 0;
}
#word {
border: 1px solid #6E6E6E;
color: #000;
font-size: 18px;
height: 27px;
padding: 6px;
width: 100%;
-web


#word {
border: 1px solid #6E6E6E;
color: #000;
font-size: 18px;
height: 27px;
padding: 6px;
width: 100%;
-webkit-appearance: none;
-webkit-border-radius: 0;
border-radius: 0;
}
</style>
<body>
<form action="http://m.baidu.com/from=2001a/s" method="get" onsubmit="return form_submit()">
<div class="wordWrap">
<input type="text" name="word" maxlength="64" size="17" id="word">
<input type="hidden" value="ib" name="sa">
<input type="hidden" value="0" name="ts">
</div>
<input type="submit" value="百度一下" class="bn">
</form>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " www.w3.org/...al.dtd">
<html xmlns=" www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>百度一下，你就知道</title>
<style>
body{background:#FFF}
#top{width:100%;height:20px;}
#top li{float:right;list-style:none;margin:0 6px}
#main{margin:200px 200px;width:500px;height:300px;}
.blue{width:70px;height:20px;background:blue;color:#FFF}
#top li a{decoration:underline;color:#000}
.main{width:550px;height:100px}
.input{width:390px;height:30px;float:left;margin:60px 0 50px 0;border:1px solid blue}
.main_center{width:250px;height:100px;margin:0 auto;}
.logo{margin:0 auto}
#bottom{width:100%;height:20px;}
#bottom li{float:left;list-style:none;margin:600px 20px 0 20px}
.bm_center{width:500px;margin:0 auto}
.hua{width:90px;height:32px;float:left;display:block;background:blue;border:1px solid blue;color:#FFF;margin:60px 10px 0 0}
</style>
</head>
<body>
<div id="top">
<ul>
<l


<li class="blue"><a href="">更多产品</li>
<li><a href="">hao123</a></li>
<li><a href="">视频</li>
<li><a href="">地图</li>
<li><a href="">贴吧</li>
<li><a href="">登陆</li>
<li><a href="">设置</li>
<li><a href="#">新闻</a></li>
</ul>
</div>
<div id="main">
<div class="main_center">
<div class="logo"><img style="height:140px;width:250px"src="http://www.baidu.com/img/bd_logo1.png"/ alt="百度知道"> </div>
</div>
<div class="baidu">
<input type="text" style="float:left;"class="input"> <a hred="#" class="hua">百度一下</a>
</div>
</div>
<div id="bottom">
<div class="bm_center">
<ul>
<li><a href="#">把百度设为首页</a></li>
<li><a href="#">百度贴吧</a></li>
<li><a href="#">shoushuo</a></li>
</ul>
</div>
</div>
</body>
</html>


你只用了一个div嘛，用两个。input元素是块元素会换行的。


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
  • 12回复贴，共1页
分享到: