1

次のように、リンク内のテキストを垂直方向に揃えたい:

私が欲しいもの

ブロック全体がリンクで、すべて同じサイズです。行の高さをコンテナの高さに設定して中央に配置し、リンク内の定義された行の高さを持つスパンで行の高さをリセットしようとしましたが、うまくいきませんでした:

私が得るもの

これが私のコードです:

                    <section class="faq">
                        <nav>
                            <ul class="nav nav--stacked">
                                <li><a href=""><span>où est la bulle à verre la plus proche ?</span></a></li>
                                <li><a href=""><span>quand sont les ramassages ?</span></a></li>
                                <li><a href=""><span>x</span></a></li>
                                <li><a href=""><span>x</span></a></li>
                                <li><a href=""><span>x</span></a></li>
                            </ul>
                        </nav>
                    </section>

そしてCSS：

.faq a {
  display: block;
  padding: 15px;
  height: 100px;
  line-height: 100px;
  padding-left: 90px;
  background: #f2f2f2;
  color: #bdbdbd;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-size: 13px; }

.faq a span {
  line-height: 1.7; }

「テーブルセル」の方法を試しましたが、うまくいきませんでした。また、よりクリーンなソリューションがあれば、それは素晴らしいことであり、非常に感謝しています!

ライブバージョンはこちら

4

3 に答える 3

0

わかりました、あなたの問題のすべてを試して対処するために、ここで私はそれをどのように書いたでしょうか. それがあなたのために働くかどうか私に知らせてください。

HTML:

 <nav class="faq">
     <ul class="nav nav--stacked">
         <li><a href="">où est la bulle à verre la plus proche ?</a></li>
         <li><a href="">quand sont les ramassages ?</a></li>
         <li><a href="">x</a></li>
         <li><a href="">x</a></li>
         <li><a href="">x</a></li>
     </ul>
 </nav>

CSS:

.faq ul {
    margin: 0;
    padding: 0;
}
.faq li {
    list-style: none;
    padding: 0 0 0 90px;
    background: #f2f2f2;
    color: #bdbdbd;
    height: auto;
    line-height: 100px;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}
.faq li:hover {
    background: #d9dfdc;
    color: #fff;
}
.faq li a {
    color: #c0c0c0;
    text-decoration: none;
}
.faq li:hover a {
    color: #fff;
}

フィドル: http://jsfiddle.net/zp238/2/

于 2013-05-19T15:08:54.813 に答える