文字上下没对齐、背景没连上
来源：2-5 字体图标的使用
夕阳升起了
2023-06-07 11:59:37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新加坡旅游-机票、酒店</title>
<mate name="keywords" content="机票、酒店、签证、"></mate>
<mate name="description" content="新加坡旅游商城有10年行业经验，为您提供全方位的旅游服务"></mate>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/css.css">
</head>
<script src="../ziti/iconfont.js"></script>
<body>
<header class="site-head">
<!-- 头部小黑条 -->
<div class="topbar">
<div class="center-wrap">
<div class="shortcut-links">
<ul>
<li>
<a href="">目的地</a>
</li>
<li>
<a href="">锦囊</a>
</li>
<li class="c">
<a href="">社区</a>
<em>
<b></b>
<i></i>
</em>
</li>
<li>
<a href="">行程助手</a>
</li>
<li class="c">
<a href="">商城</a>
<em>
<b></b>
<i></i>
</em>
</li>
<li class="c">
<a href="">酒店·民宿</a>
<em>
<b></b>
<i></i>
</em>
</li>
<li>
<a href="">特价酒店</a>
</li>
</ul>
</div>
<div class="ji">
<a href="" class="q">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-Magnifier"></use>
</svg>
</a>
<a href="" class="t">|</a>
<a href="" class="q">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixin"></use>
</svg>
</a>
<a href="" class="q">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-douyin"></use>
</svg>
</a>
<a href="" class="q">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-QQ"></use>
</svg>
</a>
<a href="" class="q">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-kuaishou"></use>
</svg>
</a>
<a href="" class="t">登陆</a>
<a href="" class="t">注册</a>
</div>
</div>
</div>
<!-- 导航栏 -->
<div class="word">
<div class="gt">
<div class="bjn">
<ul>
<li class="v"><a href="">机酒自由行</a></li>
<li><a href="">优惠机票</a></li>
<li class="v"><a href="">跟团游</a></li>
<li><a href="">酒店</a></li>
<li class="v"><a href="">当地玩乐</a></li>
<li><a href="">签证</a></li>
<li><a href="">游轮</a></li>
<li><a href="">河轮</a></li>
<li><a href="">保险</a></li>
<li><a href="">租车自驾</a></li>
<li class="v"><a href="">深度旅游</a></li>
<li><a href="">私人定制</a></li>
</ul>
</div>
</div>
</div>
<!-- 头部logo -->
<div class="kl">
<div class="gy">
<h1>新加坡商城</h1>
<div class="soso">
<input type="text" placeholder="查询目的地、酒店、机票">
<a class="df">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-Magnifier"></use>
</svg>
</a>
</div>
</div>
</div>
</header>
</body>
</html>
相关CSS代码：
/* 头部小黑条 */
header{
height:150px;
}
header .topbar{
height:32px;
width:100%;
background-color:#2A2A2A;
color:aliceblue;
line-height: 32px;
}
header .topbar .center-wrap a{
color:aliceblue;
}
.center-wrap{
width:1152px;
margin:0 auto;
}
.shortcut-links {
float: left;
}
.shortcut-links ul>li{
float: left;
margin-left:18px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #FFFFFF;
text-align: justify;
line-height: 32px;
}
.shortcut-links>ul>li.c{
padding-right: 12px;
}
.shortcut-links ul>li.c{
position: relative;
}
.shortcut-links>ul>li.c em{
position: absolute;
top:50%;
margin-top:-6px;
width:12px;
height:12px;
transition: transform .2s ease 0s;
}
.shortcut-links>ul>li.c em b{
position: absolute;
top:0px;
width:8px;
height:8px;
margin-left: 2px;
background-color:#FFFFFF;
transform: rotate(45deg);
font-family: android;
}
.shortcut-links>ul>li.c em i{
position: absolute;
top:-2px;
width:8px;
height:8px;
margin-left:2px;
background-color: #2A2A2A;
transform: rotate(45deg);
}
.shortcut-links>ul>li.c:hover em{
transform: rotate(180deg);
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
div.ji{
float:right;
}
div.ji a.q{
display: inline;
margin-right: 20px;
font-size: 20px;
}
div.ji a.t{
display: inline;
margin-right: 20px;
font-size: 14px;
}
/* 导航栏 */
.word{
height: 40px;
width:100%;
background: #20BD9A;
}
.word .gt{
width:1152px;
margin:0 auto;
}
.word .gt .bjn{
float: left;
}
.word .gt .bjn ul>li{
float: left;
line-height: 40px;
margin-right:18px;
}
.word .gt .bjn ul>li a{
font-family: PingFangSC-Regular;
font-size: 16px;
color: #ead8d8;
text-align: justify;
line-height: 18px;
}
.word .gt .bjn ul>li.v{
padding-right:16px;
position: relative;
}
.word .gt .bjn ul>li.v::before{
content: '';
position: absolute;
right:-1px;
top:64%;
margin-top:-8px;
width:0px;
height:0px;
border:7px solid transparent;
border-top-color:#ead8d8;
border-bottom:none;
transition: transform .2s ease 0s;
}
.word .gt .bjn ul>li.v:hover::before{
transform: rotate(180deg);
}
/* 头部logo */
.kl{
height:36px;
padding:21px;
}
.gy{
width:1152px;
margin:0 auto;
}
.gy h1{
float: left;
font-family: PingFangSC-Medium;
font-size: 24px;
color: #20BD9A;
text-align: justify;
line-height: 36px;
position: relative;
}
.gy .soso{
padding-top: 3px;
}
.gy .soso input{
float: left;
width: 361px;
height:28px;
margin-left: 26px;
opacity: 1.3;
border: 1px solid #20BD9A;
border-radius:4px 0 0 4px;
}
.gy .soso a{
float: left;
display: inline;
width: 32px;
height:30px;
background-color: #20BD9A;
}
.soso .df{
font-family: android;
font-size: 25px;
color: #FFFFFF;
text-align: justify;
line-height: 30px;
text-align:center;
}写回答
1回答
-
好帮手慕久久
2023-06-07
同学你好，问题解答如下：
1、文字没对齐，是因为头部小黑条中，每个li设置了左间距：
所以文字没有居左显示。
调整如下：
2、背景色不连上，是因为头部宽度太小（背景色的长度和头部一样，即背景色宽度太小），小于内容所需的宽度（内容超出背景色）。建议给头部设置最小宽度，限制其宽度，不让其宽度太小：
祝学习愉快！
0
相似问题