shinji000 の回答履歴

全3件中1～3件表示
  • リスト要素を横に並べたらずれました！！

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

    • ベストアンサー
    • CSS
  • ブロック表示すると重なってしまいます！！

    下記のｃｓｓとHTMLでWEBサイトを昔作りました 上部に■いねずみ色のブロックを並べて表示しその下に左に 縦にリスト形式でメニューが並び右にピンクのブロックで項目を並べる 形式にしたのですが、右のブロックの項目の下にテキストで文章を入れたり 何かブロックを足そうとするとブロックが重なってしまい、 上手くできませんでした。 どのようにすればうまく行きますか？教えて下さいよろしくお願いします。 /* mycss.css */ html { background-color: aqua; height: 100%; } body{ height: 100%; font-family: Verdana, Arial; font-size: 14px; } body > #container{ height: auto; } #container { min-height: 100%; height: 100%; width: 90%; margin: 0 auto; padding: 0 10px; background-color: #fff; box-shadow: 0 0 3px rgba(0,0,0,0.5); } #header { width: 100%; height: 80px; background: skyblue; border-radius: 20px; } #menu{ margin-bottom: 15px; overflow: hidden; } #main{ overflow: hidden; margin-bottom: 15px; } #contents{ float: left; width: 25%; font-size: 14px; } #contents ul { margin-bottom: 15px; padding: 10px; } #contents dl{ border-bottom: 10px; border-top: 2px solid #ccc; } #contents dd{ border-top: 2px solid #ccc; } #contents ul>li>a{ text-decoration: none; } #contents ul>li:hover { background: orange; } #sidebar { float: right; width: 70%; } #sidebar ul>li { float: left; width: 230px; height: 25px; font-size: 13px; text-align: center; padding: 4px; background: #ffd8ff; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #sidebar ul>li:hover { background: #ddd; } #sidebar ul>li>a{ text-decoration: none; display: block; } #footer{ font-size: 12px; color: #ccc; text-align: center; border-top: 1px solid #ccc; padding: 10px 0 20px; } #menu ul>li { float: left; width: 120px; height: 25px; font-size: 13px; text-align: center; padding: 2px; background: #ccc; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #menu ul>li:hover { background: #ddd; } #menu ul>li>a{ text-decoration: none; display: block; } ----------以下HTML------------------------------------------------------------------- <!DOCTYPE html> <html lang="ja"> <head> <meta chraset="shift-jis"> <title>ああああ</title> <link rel="stylesheet" href="mycss.css"> </head> <body> <div id="container"> <div id="header"> <h1>テストページ<A></h1> </div> <div id="menu"> <h2>便利リンク</h2> <ul> <li><a href="">Google</a></li> <li><a href="">Youtube</a></li> <li><a href="">【amazon】</a></li> </ul> </div> <div id="main"> <div id="contents"> <dl> <dt>検索エンジン・リアルタイム</dt> <dd> <ul> <li><a href="">CEEK.JP</a></li> <li><a href="">Google</a></li> <li><a href="">buzztter</a></li> </ul> </dd> </dl> <dl> <dt>SNS/検索エンジン/メール/質問サイト</dt> <dd> <ul> <li><a href="">Facebook</a></li> <li><a href=""">Excite</a></li> <li><a href="">Baidu</a></li> </ul> </dd> </dl> </div><!-- #contents --> <div id="sidebar"> <ul> <li><a href=""_blank">BOOK・OFF Online</a></li> <li><a href="" target="_blank">イーブックオフ</a></li> <li><a href="">infoseekニュース</a></li> </ul> </div><!-- #sidebar --> </div><!-- #main --> <div id="footer">Copyright 2018</div> </div><!-- #container --> </body></html>

    • ベストアンサー
    • CSS
  • javascript 要素追加後の高さ

    $("div").append("要素"); で要素を追加した後の親要素divの高さは、実際に要素を追加して結果の要素の高さをみる、もしくはどういう構造になるか計算して高さを事前に計算する以外に手はないでしょうか？ 要素追加前に親要素の高さをアニメーションで大きくして、その後要素を追加したいです。