ホームページ >ウェブフロントエンド >htmlチュートリアル >奥のフォーム画像と手前のdivが同じ水平線上にないのはなぜですか? _html/css_WEB-ITnose
奥のフォーム画像と手前のdivが同じ水平線上にないのはなぜですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:11:431445ブラウズ
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>HTML和CSS结合效果实例</title> <link rel="stylesheet" type="text/css" href="style01.css"></head><body> <div class="container"><!-- 这里承载所有内容，包括heading，body，footing--> <div class="wanpper"> <div class="heading"> <div class="heading_nav"> <div class="heading_title"> 极客学院 </div> <div class="heading_navbar"> <ul> <li><a href="#">首页</a></li> <li><a href="#">职业课程</a></li> <li><a href="#">技术问答</a></li> <li><a href="#">VIP会员</a></li> </ul> </div> <div class="heading_img"> <img src="jokul.jpg"> </div> <div class="heading_put"> <form> <input type="text"> </form> </div> </div> </div> <div class="body"> <div class="body_title"> <h3>熟悉极客学院</h3> <p>加入极客学院，学习最新实战教程，全面提升你的技术能力</p> </div> <hr/> <hr/> </div> </div> <div class="footing"> @极客学院 </div> </div></body></html>
*{ margin: 0px; padding: 0px; }body{ background-color: snow;}.wanpper{ width: 80%; height: 1000px; margin: 0px auto; background-color: antiquewhite;}.heading{ width: 100%; height: 90px; margin: 0px auto; background-color: snow;}.heading_nav{ /*height: 30px;*/ width: 100%; height: auto; padding-top: 30px; padding-bottom: 30px; position: relative;}.heading_title{ float: left; color: bisque; font-weight: bold; font-size: 30px; font-family: sans-serif;}.heading_navbar ul{ list-style-type: none; margin-left: 150px; padding-top: 8px; padding-bottom: 8px;}.heading_navbar li{ font-family: sans-serif; display: inline; padding-left: 20px; font-weight: bold;}.heading_navbar a:link,a:visited{ color: darkgrey; text-decoration: none;}.heading_navbar a:hover,a:active{ color: dimgrey;}.heading_img img{ border-radius: 30px; height: 26px; width: 26px; float: right; box-shadow: 0 1px 1px rgba(0,0,0,0.2); display: inline;}.heading_put form{ position: relative; margin-right: 20px; float: right;}.heading_put form input{ height: 20px; width: 100px; border-radius: 30px;}.body{ width: auto; height: auto; padding: 30px;}.body_title h3{ font-family: sans-serif; font-size: 30px; font-weight: bold; color: black;}.body_title p{ font-family: sans-serif; font-size: 15px; margin-top: 20px; margin-bottom: 20px;}.footing{ height: 30px; text-align: center; margin-top: 6px; color: darkgray;}
ディスカッションに返信 (解決策)
firebug または Chrome の開発者ツールを使用して、ナビゲーション バーの幅が広すぎて、その後ろにある画像と入力ボックスが収まらないかどうかを確認します。
一般に、一部の要素の幅が広すぎて、右側の幅が div を収容できない場合、div は新しい行に表示されます。
実際、div の位置属性を絶対に設定し、ドキュメント フローをドラッグして絶対位置に配置することもできます。
基本をしっかり学びましょう。 。 。
＆lt; div class = "heading_put"＆gt = "heading_put"＆gt;声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。