こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

関係ありそうな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;
}

投稿日時 - 2018-08-04 15:34:34

QNo.9524685

困ってます

質問者が選んだベストアンサー

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

投稿日時 - 2018-08-04 17:48:35

お礼

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

投稿日時 - 2018-08-04 19:43:19

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)