web-dev-qa-db-ja.com

CSS：行の最後の要素

2行にまたがるリンクの順序付けられていない[インライン]リストがあります。
links widget

<ul>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
    ...
</ul>

CSS疑似要素を介してドットセパレーターを追加します。

#widget-links li { display: inline; }
#widget-links li:after { content: " \00b7"; }

残念ながら、区切り文字は各行の最後の要素の後に表示されます。たった1行で、:last-childを取得して、疑似要素を削除します。

その最後のドットを複数の行で隠すための気の利いたトリックはありますか？私は奇妙なCSS、または絶対に必要な場合はJavaScriptを受け入れます。

htmlcsscss-selectorshtml-lists
35
benesch

興味深い質問です！これが、トリックを実行するjQueryを使用した「ローテク」ソリューションと私が考えるものです。

$(function() {
    var lastElement = false;
    $("ul > li").each(function() {
        if (lastElement && lastElement.offset().top != $(this).offset().top) {
            lastElement.addClass("nobullet");
        }
        lastElement = $(this);
    }).last().addClass("nobullet");
});​

アルゴリズムに従うのは難しいことではありませんが、ここにアイデアがあります。ブラウザがレイアウトを計算するときの位置に影響を与える同じプロパティ（サイズ、マージン、インライン表示など）をすべて持っていることを利用して、要素を繰り返し処理します。各アイテムの垂直オフセットを前のアイテムの垂直オフセットと比較します。それらが異なる場合は、前のものが行の終わりにあるはずなので、特別な扱いのためにそれをマークしてください。最後に、セット内の最後のアイテムも特別扱いとしてマークします。これは、定義上、それが表示される行の最後のアイテムであるためです。

これがJavascriptベースのソリューションであるという事実（それなしで実行できるのだろうか？）は、スクリプトが実行されなくても、視覚的な劣化がごくわずかであるため、ここではまったく問題ありません。ウェブページ。

実際の動作を参照。

31
Jon

私は同じ状況に直面しており、レスポンシブデザインでこれを行っています。これが私のCSSのみの解決策です。

div {
  overflow: hidden;
  margin: 1em;
}
div ul {
  list-style: none;
  padding: 0;
  margin-left: -4px;
}
div ul li {
  display: inline;
  white-space: nowrap;
}
div ul li:before {
  content: " \00b7";
}
<div>
  <ul>
    <li>item 1</li>
    <li>item B</li>
    <li>item 3</li>
    <li>item IV</li>
    <li>the long item</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item awesome</li>
    <li>give me your money</li>
    <li>contact</li>
    <li>menu item more</li>
    <li>CSS is awesome</li>
    <li>CSS3 is great</li>
    <li>more</li>
    <li>last item</li>

  </ul>
</div>

ここでもフィドルとして

6
Chad

私は実際に欠陥を見つけました ジョンの解決策 ：2つ（またはそれ以上）のlisが一列に収まるというまれな状況で、2つのlisと弾丸適合しません、彼らは弾丸なしで隣同士にレンダリングします。 （元々、箇条書きがあると、2つのliが別々の行になり、クラスnobulletが適用され、間隔が狭くなり、2番目のliが1行上に移動します。）

欠陥の例を次に示します。 http://jsfiddle.net/W2ULx/61/ （最初の行で、最後の2つのlisは箇条書きなしでレンダリングされます。元のフィドルから変更されたのは、問題を強制するためのulの幅だけです。）

私が見つけた簡単な解決策は、CSSを変更することでした

ul li.nobullet:after { content: none; }

に

ul li.nobullet:after { color: transparent; }

そのため、間隔を削除する代わりに、間隔を非表示にします。新しい行に分割されたはずのすべてのものは、削除された箇条書きによって行にぶつかるのではなく、新しい行に分割されます。

3
Randall Bruder

視覚的に中央に配置され、Randallがエレガントに処理する再レイアウトのバグにも対処できるバージョンが必要でした。このソリューションでは、各行の最初の項目に中央のドットとスペースを追加し、各行の終わりにある中央のドットとスペースのバランスを取ります。メニューを左揃えにする場合は、これを削除することをお勧めします。

Firefoxがoffset（）。topで動作していなかったため、コード内でoffset（）。leftにも切り替えました。

コードは以下のとおりですが、ここにリンクがあり、動作をより簡単に確認できます。 http://kpao.typepad.com/files/middle-dot-separated-list-v2.html

<html>
<head>
<title>Wildlife Conservation Network programs menu</title>
<style>
body, div, p, div, li, a {font-family:"Avenir Next","Segoe UI",sans-serif; font-size:15px;}
a {color:royalblue; text-decoration:none;}
a:hover, a:active {text-decoration:underline;}
ul.menu {background-color:#f2f2f2; text-align:center; padding:1em 0; margin:0;}
ul li {display:inline; white-space:nowrap;}
ul li::before {content:""; padding-right:3px;}
ul li::after {content:"\00a0\00b7"; padding-left:3px;}
ul li.firstdot::before, ul li:first-child::before {content:"\00b7\00a0"; color:transparent;}
ul li.lastdot::after,  ul li:last-child::after {color:transparent;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function midDotIt() {
    var lastElement = false;
    $("ul li").each(function() {
        if (lastElement && lastElement.offset().left > $(this).offset().left) {
            $(lastElement).addClass("lastdot");
            $(this).addClass("firstdot");
       } else if (lastElement) {
            $(lastElement).removeClass("lastdot");
            $(this).removeClass("firstdot");
       }
        lastElement = $(this);
   });
}
</script>
</head>
<body onload="midDotIt();" onresize="midDotIt();">

<ul class="menu">
<li><a href="https://wildnet.org/wildlife-programs/african-wild-dog">African Wild Dog</a></li>
<li><a href="https://wildnet.org/wildlife-programs/andean-cat">Andean Cat</a></li>
<li><a href="https://wildnet.org/wildlife-programs/cheetah-botswana">Cheetah - Botswana</a></li>
<li><a href="https://wildnet.org/wildlife-programs/cheetah-namibia">Cheetah - Namibia</a></li>
<li><a href="https://wildnet.org/wildlife-programs/cotton-top-tamarin">Cotton-Top Tamarin</a></li>
<li><a href="https://wildnet.org/wildlife-programs/elephant">Elephant</a></li>
<li><a href="https://wildnet.org/wildlife-programs/elephant-crisis-fund">Elephant Crisis Fund</a></li>
<li><a href="https://wildnet.org/wildlife-programs/ethiopian-wolf">Ethiopian Wolf</a></li>
<li><a href="https://wildnet.org/wildlife-programs/grevys-zebra">Grevy&#039;s Zebra</a></li>
<li><a href="https://wildnet.org/wildlife-programs/lion-ewaso">Lion - Ewaso</a></li>
<li><a href="https://wildnet.org/wildlife-programs/lion-niassa-0">Lion - Niassa</a></li>
<li><a href="https://wildnet.org/wildlife-programs/lion-recovery-fund">Lion Recovery Fund</a></li>
<li><a href="https://wildnet.org/wildlife-programs/okapi">Okapi</a></li>
<li><a href="https://wildnet.org/wildlife-programs/penguin">Penguin</a></li>
<li><a href="https://wildnet.org/wildlife-programs/saiga-antelope">Saiga Antelope</a></li>
<li><a href="https://wildnet.org/wildlife-programs/sharks-rays">Sharks and Rays</a></li>
<li><a href="https://wildnet.org/wildlife-programs/small-wild-cats">Small Wild Cats</a></li>
<li><a href="https://wildnet.org/wildlife-programs/snow-leopard">Snow Leopard</a></li>
<li><a href="https://wildnet.org/wildlife-programs/spectacled-bear">Spectacled Bear</a></li>
<li><a href="https://wildnet.org/what-we-do/scholarships">Scholarship Program</a></li>
</ul>
</body>
</html>
1
Dave C

受け入れられた回答のJavaScriptのみのバージョンは次のとおりです（jQueryは必要ありません！）：

document.addEventListener("DOMContentLoaded", function(event) {
    var lastElement = false;
    var els = document.querySelectorAll('ul li');
    for(var i = 0; i < els.length; i++){
        var el = els[i]; // current element
        if (lastElement && lastElement.offsetTop !== el.offsetTop) {
            lastElement.className += " nobullet";
        }
        lastElement = el;
    }
    els[els.length - 1].className += " nobullet";
});

[〜＃〜] update [〜＃〜]

各行（グループ）の要素の実際の位置を追跡する必要がある場合の別の方法は次のとおりです。

var i = 0;
var j = 0;
var keys = [];
var groupsList = [];
$("ul li").each(function() {
    var topOffset = $(this).offset().top;
    if(Array.isArray(groupsList[topOffset])) {
        groupsList[topOffset].Push(i);
    } else {
        if(j > 0) {
            var lastElementIndexOnRow = groupsList[keys[j-1]][groupsList[keys[j-1]].length - 1];
            $($('ul li').get(lastElementIndexOnRow)).addClass('nobullet');
        }
        groupsList[topOffset] = [];
        groupsList[topOffset].Push(i);
        keys.Push(topOffset);
        j++;
    }
    i++;
}).last().addClass("nobullet");
0
Vahid Amiri