奥のフォーム画像と手前のdivが同じ水平線上にないのはなぜですか? _html/css

奥のフォーム画像と手前のdivが同じ水平線上にないのはなぜですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:11:43

オリジナル

1444 人が閲覧しました

<!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;