3

私は以下のCSSとHTMLを持っています。私はリスが設定された高さと幅であり、相対位置を持つメニューを持っています。それらの中のリンクは、利用可能なすべてのスペースを占有するように絶対的に配置されているため、li 全体をクリックできます。ここまでは順調ですね。

問題は、テキストをリンクする量が異なる場合があることです。リンク テキストが 2 行にまたがる場合 (たとえば 2 番目のリンク)、縦方向のパディングを少なくしたいと考えています。ソリューションが動的でJavaScriptを使用する必要があることを除いて、これのために2番目のリンクにクラスを追加します。最初のリンクがより多くのテキストを持ち、2 行に折り返されるようにメニューが変更される場合があります。その場合、垂直方向のパディングも削除する必要があります。コードを変更せずにこれを行う必要があります。

jQuery を使用したソリューションを検討し始めました。リンクの高さを測定してみたので、「x」より上にある場合は、垂直パディングを削除するクラスを追加できました。ただし、高さは絶対配置によって設定されるため、これは機能しません。

テキストが 2 行に折り返されているかどうかを測定する別の方法はありますか? 文字数を数えることはできますが、一部の文字は他の文字よりも幅が広いため、信頼できるとは思えません。

テキストを含むリンク内にスパンを追加すると機能しますか? その場合、おそらくリンクはまだ絶対に配置でき、そのスパンは高さを測定できますか?

http://jsfiddle.net/cUQbJ/3/ 

<li>
    <a href="#">Link1</a>    
</li>    
<li>
    <a href="#">Link 2 with long text</a>    
</li>    
<li>
    <a href="#">Link3</a>    
</li>    



 li {
   display: block;
    float: left;
    position: relative;
    text-align: center;
    width: 83px;
    min-height: 53px;
    background-color: grey;
    margin-right: 5px;
}
a {
    padding-top: 13px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
}

更新 - IE7 をサポートする必要があります。

4

2 に答える 2

1

jQueryを使用してリンクテキストの周りにスパンを挿入することでこれを解決しました. 次に、jQuery はスパンの高さを測定し、必要に応じてその li にパディングを適用します。

これはおそらくレスポンシブの観点からは最善の解決策ではありません.ユーザーがブラウザのサイズを変更しても、私にとってはうまくいきます.これはスタイリングの問題にすぎないため、少し間違っても世界の終わりではありません.

于 2013-02-26T11:30:02.820 に答える
0

ここで JS を使用する必要はありません。

HTML 構造を少し変更してみましょう。リンク コンテンツを でラップしましたspan。aタグの代わりにこれらのスパンを垂直方向に揃えます。

<li>
    <a href="#" class="valign"><span class="valigned">Link 2 with long text</span></a>
</li>

http://jsfiddle.net/cUQbJ/5/

トリックを 2 つの別個のクラス.valign(親用) と.valigned(中央に配置する必要があるもの) にするメイン CSS を抽象化しました。

于 2013-02-19T11:54:03.827 に答える