HTMLバリデーターエラー

Question

私のページのメニューを次のようにしたい：私たちについて|お問い合わせ|地図。そして、私はそれのためのコードを持っている：

<div id="headermenu"> 
    <ul> 
     <li> <a title="About us" href="index.php?id=about"><?php echo $meniu['about']; ?></a></li> | 
     <li> <a title="Contacts" href="index.php?id=contacts"><?php echo $meniu['contacts']; ?></a></li> | 
     <li><a title="Map" href="index.php?id=map"><?php echo $meniu['map']; ?></a> <img alt="map icon" src="images/map_icon.png" /></li> 
    </ul> 
</div> 

をただし、HTMLバリデータはこのアイデアが好きで、私にエラーを与えていない：「文字データが、ここで許可されていません」と|を削除することを示唆しています。しかし、私はしたくない！私は何をすべきか？

Answer 1

：バリデータが外にあるテキスト文句を言っているので、あなたは、<li>の中に置くことができ

<div id="headermenu"> 
    <ul> 
     <li> <a title="About us" href="index.php?id=about"><?php echo $meniu['about']; ?></a></li> 
     <li>|</li> 
     <li> <a title="Contacts" href="index.php?id=contacts"><?php echo $meniu['contacts']; ?></a></li> 
     <li>|</li> 
     <li><a title="Map" href="index.php?id=map"><?php echo $meniu['map']; ?></a> <img alt="map icon" src="images/map_icon.png" /></li> 
    </ul> 

Answer 2

リストアイテムを水平方向に表示するようにスタイルを設定し（たとえば、display: inline-block;）、左右の境界線をmedium solid blackに設定します。

ul { display: block; } 
li { display: inline-block; border-left: medium solid black; 
    padding: 0 1ex; margin: 0; /* some spacing is nice */ } 
li:first-child { border-left: none; } 

ul要素内に直接任意の文字データがあってはなりません。そこにはli要素しか許されていません。だから、それらのバーを削除します。

Answer 3

要素にborder-rightを追加してみてください。最後のliはそれを必要としません。

これとそれが良い見えるように余白と仕事のよう

Answer 4

。

しかし、よりよい解決策は、（あなたがちょうど1つの設定枠をクリアすることができますので、最後の1にクラスを与える）最後<li>以外のすべての右の境界を設定することで、CSSを使用した垂直バーを作ることかもしれません。