在 CSS 形状的链接中设置文本样式的问题答案

【问题标题】：Issue with styling the text within a css shaped links在 CSS 形状的链接中设置文本样式的问题
【发布时间】：2021-06-13 06:03:30
【问题描述】：

我通过在 CSS 中创建形状来创建步进/指针水平导航。我遇到的问题是我似乎无法在链接中定位和设置文本“Step X: Some text”。我在链接文本周围有一个跨度类，我想在其中定位和设置样式，但是它似乎对文本没有任何作用，但对整个链接有作用。例如，如果我将文本设置为 margin-top: 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;
}

【问题讨论】：

感谢您的帮助 - 我也尝试了您的代码，但没有任何反应:(

标签： html css navigation css-shapes

【解决方案1】：

将此添加到您的 CSS：

.navh li a span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

【讨论】：

感谢您的回复和帮助，我已经尝试了您的代码，但不幸的是没有任何反应:(
你的 HTML 结构搞砸了。在打开<span> 标签之前关闭<a> 标签。
谢谢我也试过你的代码，虽然文本可以移动，但它会扰乱整个导航

【解决方案2】：

所以你要做的就是将 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>

【讨论】：

感谢您的帮助 - 我已经尝试过并运行了您的代码，它不会移动文本，而是将整个导航栏从顶部移动 25 像素
ic..您希望 css 代码移动文本...一秒更新我的答案
让我知道你的情况如何：)
感谢您再次尝试，不胜感激。我可以看到你让文本移动了，但我需要它的原始形状，我只需要设置样式并定位在箭头中心的文本
感谢 Blackfox，它离我们越来越近了，如果需要，我如何将它向右移动并包裹它？通常我们会使用边距来定位元素 - 如果您不能再做任何事情，请不要担心，休息一下，感谢您的帮助。它的行为很奇怪