Question

我能够获得首字下沉效果，但我想将剩余的文字移动一点点。如果您在小提琴中看到，文本（“apibus ac ..”）位于粉红色div的中间。我想把它移到更高的位置，使它处于粉红色div的水平。

HTML

<div class="topa-list-widget">
  <h3>My List</h1>
    <ul>
     <li>
      <a href="#">
       Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in aaaa
      </a>
     </li>                                           
    </ul>
   </div>

CSS

.topa-list-widget ul {
  list-style: none;
}

.topa-list-widget ul li a {
  text-decoration: none;
  display: block;
  line-height: 20px;
}

.topa-list-widget ul li a:first-letter {
  font-size: 20px;
  background-color: rgba(218, 42, 137, 0.5);
  padding: 0px 5px !important;
  margin-right: 1px;
}

Answer 1

vertical-align: top;就是你想要的。来自MDN docs，：

[vertical-align：top;] 也适用于:: first-letter和:: first-line。

.topa-list-widget ul li a:first-letter {
  font-size: 20px;
  background-color: rgba(218, 42, 137, 0.5);
  padding: 0px 5px !important;
  margin-right: 1px;
  vertical-align: top;
}

JSFiddle

编辑：道歉，以为你想要集中。试试vertical-align: top。编辑上面的答案以匹配此。如果这不够极端，请尝试一些计算方法，例如vertical-align: -50%;（jsFiddle）。

Answer 2

试试这个：

.topa-list-widget ul {
  list-style: none;
}

.topa-list-widget ul li a {
  text-decoration: none;
  display: block;
  line-height: 20px;
}

.topa-list-widget ul li a:first-letter {
  font-size: 15px;
  background-color: rgba(218, 42, 137, 0.5);
  padding: 0px 3px !important;
  margin-right: 0px;
}

<div class="topa-list-widget">
  <h3>My List</h3>
                    <ul>
                        <li>
                            <a href="#">
                                Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in aaaa
                            </a>
                        </li>
                        <li>
                            <a href="#">Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in aaaa</a>
                        </li>
                        <li>
                            <a href="#">Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in aaaa</a>
                        </li>
                 
                    </ul>
                </div>

css dropcap - 对齐字母高度

2 个答案: