Question

HTML标记：

我在下面显示的标记中使用了一个段落内的下拉列表。当我尝试在浏览器中加载页面时，下拉标记出现在段落之外。

<div class="logoBar">
        <section class="container">
            <p><span>SITE NAME</span><span class="glyphicon glyphicon-chevron-right"></span><span>Main Page</span>

            <font class="pull-right">
                <div class="dropdown">
                <span class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span>myemail@gmail.com</span><span class="glyphicon glyphicon-chevron-down"></span></span>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="_/components/php/signout.php">Sign out</a></li>
                  </ul>
                </div>
            </font>
            </p>
        </section><!-- container -->
      </div><!-- End logoBar -->

所以，这就是我的疑问。请注意，我已经创建了我想用于项目的标记。所以，我并不担心布局，但我只是在通过这个案例时，我想知道原因。

为什么下拉菜单不会留在浏览器中的段落内？

Answer 1

过去曾div或form内的p用于DIV标记

<p>个元素不允许</p>
中的块级元素
P元素代表一个段落。它不能包含块级   元素（包括P本身）。

习惯了这个

<div class="logoBar">
        <section class="container">
            <div><span>SITE NAME</span><span class="glyphicon glyphicon-chevron-right"></span><span>Main Page</span>

            <font class="pull-right">
                <div class="dropdown">
                <span class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span>myemail@gmail.com</span><span class="glyphicon glyphicon-chevron-down"></span></span>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="_/components/php/signout.php">Sign out</a></li>
                  </ul>
                </div>
            </font>
            </div>
        </section><!-- container -->
      </div><!-- End logoBar -->

Answer 2

p是内联元素，div是块级别。

在div中使用p标签，如果遵循w3c标准，它应该可以在所有浏览器中正常工作

段落内的下拉列表在浏览器中移出

2 个答案: