【CSS指定方法の質問】幅を指定せずに右寄せ、一列表示するには

質問

はじめて質問します。よろしくお願いいたします。

下記のようなマークアップがあります。
<div id="naviWrap">
<div id="navi">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ログイン</a></li>
</ul>
</div>
<div class="search"><form name="" action="hoge" method="get">
<input type="text" name="keyword" size="6" maxlength="30" style="width: 100px" />&nbsp;<input type="submit" value="検索" /></form>
</div>
</div>

これを、右寄せで、一列で表示しようとしています。

#naviWrapにwidthを指定してfloat:rightとして
#navi　と　.search　にtext-align:right;を指定して
display:inline;としましたが、#navi　と　.searchが右寄せで縦に並んでしまいます。
ブロック要素に幅を指定してfloatで並べる方法なども試しましたが、フォントサイズを大きくした場合横にのびて欲しいのでインライン要素で横に並べる方法を模索しています。
どのようにCSSで指定すればよいのでしょうか？マークアップの変更も必要でしょうか？
実現したい表示のイメージを添付します。

回答No.2

font_color · ベストアンサー

ulとformはブロック要素なので
#navi ul,#navi li,.search form{display:inline;}
と、してみてください。

お礼

ありがとうございます！

ul　form　にも　 display:inline;を追加したら
無事、理想の表示ができました。

回答No.1

steel_gray

ブロック要素を全部inlineにすればOKだと思いますよ。

#naviWrap {
width:40em;
text-align:right;
}
#naviWrap div,
#naviWrap ul,
#naviWrap li,
#naviWrap form {
display:inline;
}

お礼

ありがとうございます！

ブロック要素すべてに display:inline;を指定したら
理想の表示になりました。