0

ページに順序付けられていないリストがある設定がありますx <li><a href="#">Link text</a></li>.

これらはCSSを介してそれぞれ50％の幅に設定されているため、各行に2つのアイテムがあります。私の問題は、1行に2つのリンクがあり、リンクテキストが異なるため、高さが異なる可能性があることです。私の質問は; jQueryを介して、同じ行にそれぞれに同じ高さを設定するにはどうすればよいですか（aは境界線の下部があるスタイルなので、並べると最もよく見えます）。ただし、セクション内のすべてが同じ高さである必要はなく、「prライン」ベースでのみです。

それが意味を成すことを願っています:)

4

4 に答える 4

2

あなたが達成しようとしているのは、行の高さが可変のグリッド レイアウトと呼ばれるものです。HTML でこれを行う唯一の方法は、table 要素です。

本当にこれを行いたい場合は、結果の美しさの祭壇でマークアップのセマンティックを犠牲にする必要があります。

すべきことは、2 列のテーブルを作成し、以前liの要素の内容をtdテーブルの要素に入れることです。td の vertical-align プロパティとそのスタイル プロパティを使用して、デザインのニーズに合わせます。

于 2012-06-21T09:30:00.120 に答える
0

これはフィドルです：http://jsfiddle.net/aSJSm/1/

コードは次のとおりです。

<html>:

<ul>
<li><a href="javascript:void(0)">Item1 bla bla bla</a></li>
<li><a href="javascript:void(0)">Item2</a></li>
<li><a href="javascript:void(0)">Item3</a></li>
<li><a href="javascript:void(0)">Item4 ala bala bala</a></li>
<li><a href="javascript:void(0)">Item5</a></li>
<li><a href="javascript:void(0)">Item6</a></li>
<li><a href="javascript:void(0)">Item7</a></li>
<li><a href="javascript:void(0)">Item8</a></li>
</ul>​

<css>:

ul{
 width: 200px;   
 float:none;
}
ul li a{
 width: 50%;   
 float: left;   
 border-bottom: 1px solid black;    
}​

<javascript>:

var setList = function(){
    var listItems = $('ul').children();
    $.each(listItems, function(index){
        if (index % 2 == 0){
            var leftElementHeight = $(this).children('a').height();
            var rightElementHeight = $(this).next().children('a').height();
            if (leftElementHeight < rightElementHeight)
                $(this).children('a').css("height", rightElementHeight);
            else
                $(this).next().children('a').css("height", leftElementHeight);
        }    
    });
}
setList();​

$(document).ready(function(){}) に含まれていることと、最新の jquery があることを確認してください。

于 2012-06-21T09:32:49.157 に答える
0

本当にjQueryでこれを行いたい場合は、次のようにすることができます：

​$('li:even').each(function(){ 

    var leftHeight = $(this).height();
    var rightHeight = $(this).next().height();

    var newHeight = (leftHeight <= rightHeight) ? rightHeight : leftHeight;

    $(this).next().andSelf().height(newHeight);

});​​​​​​​​​​

JSFiddle: http://jsfiddle.net/svenhanssen/VEnXp/

于 2012-06-21T09:54:44.453 に答える
-1

2 つのリンクの ID またはクラスを設定します。そして、以下の方法で高さを設定します。

$("#id").css("height", '100px');
于 2012-06-21T09:17:20.617 に答える