ＣＳＳで右寄せメニューを一行にしたい

質問

メインメニューを画面の右側に一行に表示したいのですが、
-----------------------------
タイトル
　　　　　　ｍ１　ｍ２　ｍ３・・・
-----------------------------
メニューはロールオーバー効果を使っていて、
画像の形から、文字を右寄せにしたいのです。
.m_ichi {
padding: 5px 5px 5px 0px;
float: right;
}
.m_mn {
width: 100px;
height: 30px;
text-align: right;
vertical-align: text-bottom;
}
a.m_menu:link {
font-family: sans-serif;
font-size: 16px;
font-weight: bold;
color: #ffffff;
margin: 0px;
padding: 10px 0px 2px 1px;
width: 100px;
height: 30px;
background-image: url(img/menu_b.gif);
background-repeat: no-repeat;
display: block;
text-decoration: none;
}
a.m_menu:visited {
a.m_menu:hover {
（a.m_menu:link と同じような記述）

<div class="m_ichi">
<span class="m_mn"><a href="#" class="m_menu">m1</a></span>
<span class="m_mn"><a href="#" class="m_menu">m2</a></span>
<span class="m_mn"><a href="#" class="m_menu">m3</a></span>
</div>
と記述したら、メニューが縦に並んでしまい、文字も左に寄って
しまいました。<TD>記述を使えば、なんとかできたのですが、
スタイルシートできれいに表示させる方法を教えて下さい。

回答No.4

hiro_maru

こんばんは。自分も今webデザインに関して色々と勉強中の身なのですが、

.m_mn
に
float: right;

を付けてもダメでしょうか？

お礼

ありがとうございます。画像の文字は入りましたが、
メニューの順番がなぜか　ｍ３　ｍ２２２　ｍ１　のように
逆になってしまいました。

回答No.3

grizzlycat

#1です。

partitaさん補足回答ありがとうございました。

簡単ですが自分の作っているサイトから編集してサンプルを作ってみました。ご参考にどうぞ

【スタイルシート部】
#navi {
background-color: #e8e8e8;
}

#navi li {
float: right;
list-style-type: none;
border-right: 1px solid #dddddd;
}

#navi li a {
display: block;
width: 100px;
line-height: 30px;
color: #333333;
text-decoration: none;
text-align: center;
background-color: #eeeeee;
}

#navi li a:hover {
color: #333333;
background-color: #cccccc;
}

【HTML部】
<div id="navi">
<ul>
　<li><a href="#">test3</a></li>
　<li><a href="#">test2</a></li>
　<li><a href="#">test1</a></li>
</ul>
</div>

お礼

ありがとうございます。元々のサンプルは画像付きの縦ならびと、
画像なしの横並びのサンプルだったのですが、画像付きの横並びは
色々試してみましたが、キレイにいきませんでした。

回答No.2

partita

>「・」が付かないようにするには

li {list-style-type:none;}

お礼

ありがとうございます　「・」は消えました。

回答No.1

grizzlycat

[a.m_menu:link] から【display: block】を削除してインライン要素にしてみてはいかがでしょうか？

一応私の環境ではIEとMozillaで確認が出来ました。間隔などがブラウザで異なってしまうので別途調整するか、<span>ではなく<ul><li>でくくるなどの必要がありそうです。

補足

回答をいただきまして、ありがとうございます。
display: block をはずすと、（はずしたせいなのかは解りませんが）
画像の幅が文字の長さによって変わってしまいます。
（m1とm222で長さが変化してしまいます）
<span>ではなく、<li>を使うと、「・」が前に付きます。
「・」が付かないようにするには、<span>しかないのでしょうか？
追加の質問で申し訳ありませんが、よろしくお願いします。