我通过在CSS中创建形状创建了一个步进/指针水平导航。我遇到的问题是，我似乎无法对文本进行定位和风格设置步骤X：一些文本"；在链接中。我有一个关于链接文本的span类，我想在里面定位和设置样式，但它似乎对文本没有任何作用，但对整个链接有作用。例如，如果我将文本样式设置为页边空白顶部：25px；文本不会移动，但整个导航栏会移动。
有人能纠正这个问题并告诉我该怎么做吗？我将不胜感激！
这是我的html:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="shappednav.css">
</head>
<body>
<div class="navh">
<ul >
<li id="item1"><a href="#" <span class="text">Step 1: Some text</span></a></li>
<li><a href="#" <span class="text">Step 2: Some text</span></a></li>
<li><a href="#" <span class="text">Step 3: Some text</span></a></li>
<li><a href="#" <span class="text">Step 4: Some text</span></a></li>
</ul>
</div>
</body>
</html>
这是我的CSS：
.navh{
background-color: transparent;
padding: 0;
width: 100%;
margin: 1em auto;
clear: both;
border-bottom: none;
}
.navh ul{
list-style-type: none;
}
.navh li a {
width: 180px;
height: 125px;
position: relative;
background: #1b9fa4;
border-radius:2%;
float:left;
margin-left: 10px;
background-color: #e91e63 ;
border-color: #1b9fa4;
}
#item1 :after {
border-left: 0px solid;
}
.navh li :after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 62.5px solid white;
border-top: 62.5px solid transparent;
border-bottom: 62.5px solid transparent;
z-index:1;
}
.navh li :before {
content: "";
position: absolute;
right: -62.5px;
bottom: 0;
width: 0;
height: 0;
border-left: 62.5px solid #e91e63;
border-top: 62.5px solid transparent;
border-bottom: 62.5px solid transparent;
z-index: 2;
}
.navh li a:hover{
background: yellow;
}
.navh li a:hover:before {
border-left: 62.5px solid yellow;
/* border-top: 62.5px solid transparent;
border-bottom: 62.5px solid transparent;*/
}
span.text {
border:solid;
Color:white;
}
所以你所要做的就是将css设置为：
.text {
border:solid;
Color:white;
}
.navh{
background-color: transparent;
padding: 0;
width: 100%;
margin: 1em auto;
clear: both;
border-bottom: none;
}
.navh ul{
list-style-type: none;
}
.navh li a {
width: 180px;
height: 125px;
position: relative;
background: #1b9fa4;
border-radius:2%;
float:left;
margin-left: 10px;
background-color: #e91e63 ;
border-color: #1b9fa4;
}
#item1 :after {
border-left: 0px solid;
}
.navh li :after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 62.5px solid white;
border-top: 62.5px solid transparent;
border-bottom: 62.5px solid transparent;
z-index:1;
}
.navh li :before {
content: "";
position: absolute;
right: -62.5px;
bottom: 0;
width: 0;
height: 0;
border-left: 62.5px solid #e91e63;
border-top: 62.5px solid transparent;
border-bottom: 62.5px solid transparent;
z-index: 2;
}
.navh li a:hover{
background: yellow;
}
.navh li a:hover:before {
border-left: 62.5px solid yellow;
/* border-top: 62.5px solid transparent;
border-bottom: 62.5px solid transparent;*/
}
.text {
}
a {
Color:white;
text-align: right;
line-height: 115px;
}<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="shappednav.css">
</head>
<body>
<div class="navh">
<ul >
<li id="item1"><a href="#"> <span class="text">Step 1: Some text</span></a></li>
<li><a href="#"> <span class="text">Step 2: Some text</span></a></li>
<li><a href="#"> <span class="text">Step 3: Some text</span></a></li>
<li><a href="#"> <span class="text">Step 4: Some text</span></a></li>
</ul>
</div>
</body>
</html>将其添加到您的CSS:
.navh li a span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}