Question

我正在尝试使用拉直文本创建倾斜链接。尽管进行了大量的修修补补，但我无法解开文本。这是我正在使用的HTML代码：

<div class="menu">
    <div class="row">
        <div class="col-md-6">
            <h1>Photography</h1>
        </div>
        <div class="col-md-6">
            <ul>
                <li class="skew"><a class="skew-fix">Work</a></li>
                <li class="skew"><a class="skew-fix">Shop</a></li>
                <li class="skew"><a class="skew-fix">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

这是CSS：

.menu {
    height: 90px;
    border-bottom: 1px solid black;
    padding: 0 50px;
}
.menu h1 {
    line-height: 90px;
    margin: 0;
}
.skew {
    margin: 5px 0;
    display: inline-block;
    font-size: 25px;
    padding: 0 18px;
    float: right;
    line-height: 80px;
    transform: skewX(-20deg);
}
.skew-fix {
    transform: skewX(20deg);
}

任何人都可以确定我做错了吗？

Answer 1

transform不适用于链接等内联元素。

让他们inline-block或block

.menu {
  height: 90px;
  border-bottom: 1px solid black;
  padding: 0 50px;
}
.menu h1 {
  line-height: 90px;
  margin: 0;
}
.skew {
  margin: 5px 0;
  display: inline-block;
  font-size: 25px;
  padding: 0 18px;
  float: right;
  line-height: 80px;
  transform: skewX(-20deg);
  background: pink;
}
.skew-fix {
  transform: skewX(20deg);
  display: block;
}

<div class="menu">
  <div class="row">
    <div class="col-md-6">
      <h1>Photography</h1>
    </div>
    <div class="col-md-6">
      <ul>
        <li class="skew"><a class="skew-fix">Work</a>
        </li>
        <li class="skew"><a class="skew-fix">Shop</a>
        </li>
        <li class="skew"><a class="skew-fix">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</div>

CSS无法解决文本问题

1 个答案: