リスト要素を横に並べたらずれました！！

質問

関係ありそうなHTMLとCSSは以下のあたりだと思います。
もしかすると違うかも知らませんが？
足りなければ追記します。
画像のようにブロックがずれてしまいます。どうすれば
綺麗にならべて表示できるでしょうか？

よろしくお願いします。

---HTML-------------------------------------------------------------

<div id="sidebar2">
<dl>
<dt>検索エンジン・リアルタイム</dt>
<dd>
<ul>
<li><a href="http://www.ceek.jp/" target="_blank">CEEK.JP</a></li>
<li><a href="http://www.google.co.jp/" target="_blank">Google</a></li>
<li><a href="http://www.yahoo.co.jp/" target="_blank">Yahoo</a><a href="https://login.yahoo.co.jp/config/login_verify2?.src=ym" target="_blank">【Yahoo:ログイン】</a></li><li><a href="http://search.yahoo.co.jp/realtime" target="_blank">Yahoo検索リアルタイム</a></li>
<li><a href="http://buzztter.com/#/ja" target="_blank">buzztter</a></li>
</ul>
</dd>
</dl>

--css-------------------------------------------------------------------
#sidebar2 {
float: right;
width: 70%;
}

#sidebar2 ul>li {
display:inline-block;
width: 250px;
height: 50px;
font-size: 13px;
text-decoration: none;
text-align: center;
padding: 4px;
background: #009999;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 4px;
text-shadow: 0 1px 0 #fff;
}

#sidebar2 ul>li:hover {
background: #99CCFF;

}

#sidebar2 ul>li>a{
text-decoration: none;
color: #FFFFFF;
display: block;
}

回答No.1

shinji000 · ベストアンサー

#sidebar2 ul>li>a{
display: block;
}
がずれる原因のようです。
これを外せばずれません。
２行で表示したい所は単に<br>で改行すればいいと思います。

お礼

回答ありがとうございます。
参考にさせていただきます。