IE8 について心配する必要がない人にとっては、これは次のように簡単です。
ul li { list-style: none; display: inline; }
ul li:after { content: " \00b7"; }
ul li:last-child:after { content: none; }
このソリューションは、IE8 互換性 (2013 年) を除いて、OP のすべての要件に一致します。
シンプルなマークアップ。JavaScript はありません。いいえ:last-child
<ul>
<li><a>Profile Image</a></li>
<li><a>Name</a></li>
<li><a>Activity Information</a></li>
<li><a>Distance</a></li>
<li><a>Pace</a></li>
<li><a>Points Earned</a></li>
</ul>
ul { display:inline-block; padding:0; text-align:center }
li { display:inline }
li a { white-space:nowrap }
li:after { content:" "; letter-spacing:1em; background:center center no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMkMEa+wAAAAnSURBVBhXY/Dz89MA4sNA/B9Ka4AEYQIwfBgkiCwAxjhVopnppwEApxQqhnyQ+VkAAAAASUVORK5CYII=); }
さらに改良されたバージョンがこちら。特定のページ幅で、最後の 1 つだけでなく 2 つの箇条書きが欠落する不一致が発生し続けました。すなわち
リンク1・リンク2・リンク3 リンク4
リンク5・リンク6
問題は、ページ幅が適切な場合、最後の箇条書き区切りを削除すること自体がテキストフローに影響を与える可能性があることだったと思います. 新しいスクリプトは、リテラルの改行を追加および削除することにより、元のテキスト フローをロックします。
画面のサイズが変更されるたびに同じスクリプトを実行するので、ぎこちない改行に悩まされることはありません。
<style>
ul { width: 700px; text-align : center }
ul li { display: inline; white-space: nowrap; }
ul li:after { content: " \00b7"; }
ul li.nobullet:after { content: none; }
</style>
<body onresize="processBullets()" onload="processBullets()">
<ul>
<li><a href="http://google.com">Harvard Medical School</a></li>
<li><a href="http://google.com">Harvard College</a></li>
<li><a href="http://google.com">Harvard Medical School</a></li>
<li><a href="http://google.com">Harvard College</a></li>
<li><a href="http://google.com">Harvard Medical School</a></li>
<li><a href="http://google.com">Harvard College</a></li>
<li><a href="http://google.com">Harvard Medical School</a></li>
<li><a href="http://google.com">Harvard College</a></li>
</ul>
<body>
<script>
function processBullets() {
var lastElement = false;
$("br").remove(".tempbreak");
$("ul li").each(function() {
$(this).removeClass("nobullet");
if (lastElement && lastElement.offset().top != $(this).offset().top) {
$(lastElement).addClass("nobullet");
$(lastElement).append('<br class="tempbreak" />');
}
lastElement = $(this);
}).last().addClass("nobullet");
}
</script>
箇条書き (またはその他の区切り記号)のイメージ (透明な背景) を作成してもかまわない場合は、これを背景としてPNG描画されたリスト項目間の自然なスペースを使用できます。
リスト項目が次の行に折り返される場所では、スペース (したがってその背景) はレンダリングされません。
これにより、セパレーターが占めるスペースに関連するレイアウトの問題が回避され、Javascript/jQuery が回避され、ブラウザー独自のレイアウト エンジンを利用して作業が行われます。word-spacing 属性を使用して、セパレーターのスペースを調整できます。
自然なスペースとして使用される可能性のあるマークアップ内に他の空白がないことを確認する必要があります。ここで 5x5 よりも高解像度の画像を background-size と組み合わせて使用すると、ズームしても問題なく表示されますが、IE8 は背景画像のスケーリングをサポートしていないことに注意してください。もう 1 つの欠点は、色を変更したい場合は PNG を編集する必要があることです。
@bleuscyther の回答の変更に基づくコード:
CSS :
ul { max-width: 700px; padding: 0; text-align: center; }
ul li { display: inline; white-space: nowrap; }
ul .separator {
word-spacing: 1.1em;
background-repeat: no-repeat;
background-position: 50% 60%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=);
}
HTML :
<ul>
<li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
</span><li><a href="http://google.com">Harvard College</a></li><span class='separator'>
</span><li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
</span><li><a href="http://google.com">Harvard College</a></li><span class='separator'>
</span><li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
</span><li><a href="http://google.com">Harvard College</a></li><span class='separator'>
</span><li><a href="http://google.com">Harvard Medical School</a></li><span class='separator'>
</span><li><a href="http://google.com">Harvard College</a></li>
</ul>
user2511031のソリューションはほぼ理想的です...有効なHTMLではありません。LI の外側、UL の内側に SPAN があってはなりません。
しかし、それは本当に理想的な解決策がないという意味ではありません。見つけた！
マークアップ全体にスパンを配置し、空白をきれいにする必要はありません。必要なスペースを「:after」疑似要素コンテンツに配置し、背景画像を適用します。
それは同じです！
ul { max-width: 700px; padding: 0; text-align: center; }
ul li { display: inline; white-space: nowrap; }
ul li:after {
content: " ";
word-spacing: 2em;
background-repeat: no-repeat;
background-position: 50% 60%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=);
}
フィドルはこちら
次のように、テキストインデントを使用して、箇条書きリストのスタイルを正常に設定しました。
HTML:
<ul class="horizontal">
<li>Payment</li>
<li>Check</li>
<li>Direct Deposit</li>
</ul>
CSS:
ul.horizontal li {
list-style-type:disc;
float: left;
text-indent:-4px;
margin-right:16px;
}
最も簡単な方法では、必要なのはスタイルシートtext-align: centerのulとdisplay: inline-blockを設定することだけです。の疑似クラスをli利用して、必要に応じて画像を区切り文字として使用できます。:afterli
これが例です。
http://jsfiddle.net/caramba/tSnnP/
<div>
<ul>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
</ul>
<ul>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
</ul>
</div>
<style type="text/css">
div {
white-space: nowrap;
width: 100%;
}
span {
display:inline-block;
margin:0 5px;
}
ul {
text-align:center;
}
ul li {
display:inline;
margin:20px;
}
.hide {
display:none;
}
.icon {
position:relative;
display:inline-block;
background-position:-1000px -1000px;
background-image:url(http://www.alexander-bown.com/wp-content/uploads/2011/05/big-black-dot.jpg);
background-repeat:no-repeat;
background-size:5px 5px;
width:5px;
height:5px;
}
.icon {
background-position:0px 0px;
top:-2px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul li:first-child').children('span').addClass("hide");
});
</script>