谁帮我看看这两个<span>为什么不能同一行显示
*********Html代码***********<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><ti...
*********Html代码***********
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XXXX</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="header">
<h1 title="">XXXX</h1>
<a href="./index.html"><img src="./images/logo.png" alt="XXXX"></a>
<div class="header_wrap">
<span id="phone" class="phone">400-800-3333</span>//这两个span为什么不能同一行显示
<div id="search">
<form action="">
<input type="text" class="text">
<img src="images/search_02.png" alt="" class="btn">
</form>
</div>
</div>
</div>
<div id="navbar"></div>
<div id="slider_wrapper"></div>
<div id="func_wrapper"></div>
<div id="content"></div>
<div id="honnor"></div>
<div id="footer"></div>
</body>
</html>
**********************CSS代码*********************************
body,ul,li,p,h1,h2,h3,h4,h5,h6,img,br,hr,table,tr,td,dl,dt,dd,form {
margin: 0;
padding: 0;
}
body {
font-family: Arial,"微软雅黑";
font-size: 14px;
background-color: #f7f7f7;
}
.clear {
clear: both;
font-size: 0px;
}
ul,li {
list-style: none;
}
img {
border: none;
}
/*一般链接*/
a {
text-decoration: none;
color: #555;
}
a: hover {
color: #3366ff;
}
/* 样式重置 */
#header {
width: 960px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
h1 {
width: 0;
height: 0;
overflow: hidden;
}
#header a img {
display: inline-block;
}
.header_wrap {
display: inline-block;
width: 700px;
height: 40px;
background-color: red;
}
.header_wrap #phone {
width: 300px;
height: 40px;
}
.search {
display: inline-block;
}
第二个span后面给我改成div然后加display:inline-block;但还是不行,刚才忘记改回来了 展开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XXXX</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="header">
<h1 title="">XXXX</h1>
<a href="./index.html"><img src="./images/logo.png" alt="XXXX"></a>
<div class="header_wrap">
<span id="phone" class="phone">400-800-3333</span>//这两个span为什么不能同一行显示
<div id="search">
<form action="">
<input type="text" class="text">
<img src="images/search_02.png" alt="" class="btn">
</form>
</div>
</div>
</div>
<div id="navbar"></div>
<div id="slider_wrapper"></div>
<div id="func_wrapper"></div>
<div id="content"></div>
<div id="honnor"></div>
<div id="footer"></div>
</body>
</html>
**********************CSS代码*********************************
body,ul,li,p,h1,h2,h3,h4,h5,h6,img,br,hr,table,tr,td,dl,dt,dd,form {
margin: 0;
padding: 0;
}
body {
font-family: Arial,"微软雅黑";
font-size: 14px;
background-color: #f7f7f7;
}
.clear {
clear: both;
font-size: 0px;
}
ul,li {
list-style: none;
}
img {
border: none;
}
/*一般链接*/
a {
text-decoration: none;
color: #555;
}
a: hover {
color: #3366ff;
}
/* 样式重置 */
#header {
width: 960px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
h1 {
width: 0;
height: 0;
overflow: hidden;
}
#header a img {
display: inline-block;
}
.header_wrap {
display: inline-block;
width: 700px;
height: 40px;
background-color: red;
}
.header_wrap #phone {
width: 300px;
height: 40px;
}
.search {
display: inline-block;
}
第二个span后面给我改成div然后加display:inline-block;但还是不行,刚才忘记改回来了 展开
1个回答
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询