<ul>タグで各<li>の中身を横方向羅列させつつ各項目を等幅に。

質問

<ul>タグで各<li>の中身を横方向羅列させつつ各項目を等幅に。

以下のように、ulですが、横方向に羅列して表示される、
htmlソースと、CSSソースがあります。

で、これをもとにしつつ、（あるいはもとにしなくてもいいのですが）、
各項目・・・下の例では、

[サイトマップ]　[ヘルプ]　[お問い合わせ]

の３つそれぞれを、等幅にして表示させたく思っています。

条件としては・・・

●<ul>を使うことは必須。

●cssハック的なものを使ってもかまいません。

●できればJavaScriptを使いたくないですが、やむを得ない場合は、OKです。

●もしやむをえなければ、たとえば、「各項目の、等幅化する前のwidthは、7em以内でないといけない」
　などの条件がついてもかまいません。

以前、できたような気がするのですが・・・やりかたを忘れてしまいました。

ご存じのかたいらっしゃいましたら、お教えいただければ幸いです。

よろしくお願いいたします。

//-----------------------------------------------------------

＜html ソース＞

<ul class="miya-ul_lateral">
<li class="miya-li_lateral_first">サイトマップ</li>
<li>ヘルプ</li>
<li class="miya-li_lateral_last">お問い合わせ</li>
</ul>

//-----------------------------------------------------------

＜cssソース＞

/* 1st step: */
ul.miya-ul_lateral li{
display:inline;
list-style-type:none;
padding:0 2px 0 5px;
margin:0;
border-left:1px solid #000;
}
/* /1st step: */

/* 2nd step: */
ul.miya-ul_lateral li.miya-li_lateral_first{
border-left:0;
padding-left:0;
}
/* 2nd step: */

/* 3rd step: */
ul.miya-ul_lateral li.miya-li_lateral_last{
padding-right:0;
}
/* 3rd step: */

よろしくお願いいたします。

回答No.1

yambejp · ベストアンサー

ん～・・・いまいちよくわかりませんが、等幅にするならwidthを指定しなくては
いけないでしょう。
こんな感じでどうですか？

<style>
ul.miya-ul_lateral{
list-style-type:none;
padding:0 2px 0 5px;
margin:0;
}
ul.miya-ul_lateral li{
float:left;
}
ul.miya-ul_lateral li.miya-li_lateral_first a{
border-left:0px solid;
}
ul.miya-ul_lateral a{
display:block;
width:7em;
border-left:1px solid #000000;
text-align:center;
text-decoration:none;
}
ul.miya-ul_lateral a:hover{
background-Color:#ffff00;
}
</style>

<ul class="miya-ul_lateral">
<li class="miya-li_lateral_first"><a href="#">サイトマップ</a></li>
<li><a href="#">ヘルプ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>

回答No.2

pick52

MediaWikiのMonobookスキンで個人用ツールバーがそのような実装して
いますね。
WikipediaでCSSを無効にしてみるとリストで作成されていることが
分かります。

http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8

MonobookスキンのCSSを解析してみたらどうでしょうか。

http://ja.wikipedia.org/skins-1.5/monobook/main.css