老师，我的小箭头，酒店那里总是盖住，为什么老师的不会盖住
来源：2-3 页面顶部的开发（2）
qq_慕仰20210716
2021-08-19 16:14:44
css.css
/* 主攻的样式表 */
.site-head{
/* 宽度先不设置 */
height: 150px;
}
.site-head .topbar{
height: 32px;
background-color: #2A2A2A;
line-height: 32px;
}
.site-head .topbar .center-wrap a{
color: white;
}
.site-head .topbar .center-wrap .short-links{
float: left;
}
.site-head .topbar .center-wrap .short-links ul{
}
/* 将来某个文字下还会有下拉菜单（ul和li）所以这里要用后代选择器 */
.site-head .topbar .center-wrap .short-links>ul>li{
float: left;
/* 刚刚解释了半天，为什么这里又要用margin呢: */
margin-right: 18px;
font-size: 14px;
}
/* 绝对定位的元素可以漂浮在padding中 */
.site-head .topbar .center-wrap .short-links>ul>li.have-menu{
padding-right: 12px;
position: relative;
}
.site-head .topbar .center-wrap .short-links>ul>li.have-menu .arrow{
width: 9px;
height: 9px;
position: absolute;
top: 10px;
left: 32px;
}
.site-head .topbar .center-wrap .short-links>ul>li.have-menu .arrow b{
width: 6px;
height: 6px;
background-color: white;
position: absolute;
top: 2px;
left: 0;
transform: rotate(45deg);
}
.site-head .topbar .center-wrap .short-links>ul>li.have-menu .arrow i{
width: 6px;
height: 6px;
background-color: #2A2A2A;
position: absolute;
top: 0;
left: 0;
transform: rotate(45deg);
}
base.css
/* 这里放公共类 */
@font-face {
font-family: "PingFangSCRegular";
src: url('../fonts/PingFangSCRegular.ttf') format('truetype');
}
body{
font-family: "PingFangSCRegular";
}
/* 版心 center-wrap意思为包容器*/
.center-wrap {
width: 1152px;
margin: 0 auto;
}
.clearfix {
overflow: hidden;
}
.clearfix::after {
content: "";
display: block;
clear: both;
overflow: hidden;
}
/*现在公司不用原子类了，因为太多了写得丑陋
.mgt10{
margin-top: 10px;
}
.mgt12{
margin-top: 12px;
}
.mgt14{
margin-top: 14px;
} */
.tac {
text-align: center;
}
.db {
display: block;
}
.dib {
display: inline-block;
}
reset.css
/* 百度搜索yui reset＋百度快照，向下找到link标签，网址选中右键打开，就是以下注释（注释要保留，是职业道德，留下版权信息）和样式 */
/* 是雅虎工程师在2014年写的为复位的样式表 */
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License. BSD License商业许可使用
http://yuilibrary.com/license/
*/
html {
color: #000;
background: #fff;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,
img {
border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: normal;
}
ol,
ul {
list-style: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
q:before,
q:after {
content: "";
}
abbr,
acronym {
border: 0;
font-variant: normal;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
*font-size: 100%;
}
legend {
color: #000;
}
#yui3-css-stamp.cssreset {
display: none;
}
a{
text-decoration: none;
}
html
<!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>
<!-- 下边两条有效增加搜索引擎权重，content里的逗号中文英文都可以 -->
<meta name="keywords" content="机票，酒店，旅游攻略，签证，出国，自由行">
<meta name="Description" content="暮云游商城有十多年旅游行业经验，为您提供全方位旅游服务">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/css.css">
</head>
<body>
<!-- 通栏有版心：贯穿一个底色，内容居中(大盒子+小盒子) -->
<hearer class="site-head">
<div class="topbar">
<div class="center-wrap">
<nav class="short-links">
<ul>
<li>
<a href="">目的地</a>
</li>
<li>
<a href="">锦囊</a>
</li>
<li class="have-menu">
<a href="">社区</a>
<em class="arrow">
<b></b>
<i></i>
</em>
</li>
<li>
<a href="">行程助手</a>
</li>
<li class="have-menu">
<a href="">商城</a>
<em class="arrow">
<b></b>
<i></i>
</em>
</li>
<li class="have-menu">
<a href="">酒店·民宿</a>
<em class="arrow">
<b></b>
<i></i>
</em>
</li>
<li>
<a href="">特价酒店</a>
</li>
</ul>
</nav>
</div>
</div>
</hearer>
</body>
</html>
1回答
-
同学你好，是因为给箭头元素设置的left值偏小，正好偏移到“酒店·民宿”这几个字的中间位置，如图
而老师的没问题，是因为给箭头元素设置的偏移属性为right，只要将right设置为0，箭头元素就会位于盒子的右侧，如图
建议同学跟着老师的代码敲，不容易出错。
祝学习愉快！
0
相似问题