borderの位置を調整する方法を教えてください

質問

【html】
<ul>
<li>A</li>
<li>B</li>
</ul>

【ｃｓｓ】

li{
border-left: 1px solid #CCCCCC;
}

このような状態の場合、線の表示される位置を調整するには
どうすればいいのでしょうか？

初歩的な質問だと思いますが、よろしくお願いします。

回答No.2

4649panda · ベストアンサー

リストはインライン表示(display: inline; )なのですね。

もしリストの中身が、決まった字数かサイズなら、左右のパディングを等しくして中身をセンターに指定(text-align: center; )してやればできると思うのですが。

li {
display: inline;
padding: 上下のパディング 左右のパディング;
text-align: center;
}

それとも、
｜　A　|ＢＢＢ｜ ＣＣ ｜
のように、中身がバラバラの文字数、サイズのものを均等幅にしてborderで区切るのでしょうか？
その場合でしたら、上記の方法では手間がかかるかもしれません。
ターゲットのブラウザによって最適な方法が違ったり、CSSハックが必要になるので。

もしもリスト表記に拘らないのなら、テーブルにすると簡単かも知れません。
(こんなかんじで)

<table>
<tr>
<td>A</td>
<td>B</td>
<td style="border: none; ">C</td>
</tr>
</table>

table {
border-collapse: collapse;
margin: 0;
border-right: 1px solid #CCCCCC;
}
td {
margin: 0;
padding: パディングの値;
text-align: center;
border-left: 1px solid #CCCCCC;
}

お礼

なんとか思い通り表示することができました。

正しく表示されなかった原因はhtmlのほうにあったようで、
cssは前回に回答頂いた内容で間違いありませんでした。

ご親切にありがとうございました。

回答No.1

4649panda

borderを左にずらすなら、liのpadding-leftの設定を調節してみてください。
paddingに設定した値分だけ、左にずれます。
リストを全部まとめて右にずらすなら(borderごとずれます)、ulにpadding-leftを設定しても、同じ様に(今度はリストが右に)ずれます。

お礼

早速やってみて、リストを動かすことはできたのですが、
以下のようになってしまいました。

　　Ａ｜Ｂ｜Ｃ｜　→　　Ａ｜　　Ｂ｜　　Ｃ｜

leftでもrightでも、線を均等に配置することができませんでした。
回答ありがとうございました。