2

我正在修改 WordPress 主题的标题部分，并且试图将几个 div 嵌套在另一个 div 中。我对 HTML/CSS 不是很有经验，但我所观察到的对我来说似乎很奇怪。

我的代码如下所示：

<div class="extras">
    <div id="search"> 
        <form role="search" method="get" id="searchform" action="http://mentatescholars.com/" >
            <input type="search" placeholder="Search" value="" name="s" id="s" />
            <input type="submit" id="searchsubmit" value="Search" />
        </form>
    </div><!-- end #search -->
    <div class="phone-number">
        <div class="phone-number-main">1-885-MENTATE</div>
        <div class="phone-number-sub">1-885-636-8283</div>
    </div>
</div>

在图片中，我phone-number使用 Firefox 的检查器选择了 div（选择extras看起来相同）。令我感到奇怪的是为什么它从 div 的顶部开始，extras而不是在searchdiv 之后。search甚至设置高度为 40px。

我的搜索框和电话号码

如果我选择第三个 div，那么它会显示在前一个 div 之后开始的 div。

选择第三个 div 的行为就像我想的那样
让我感到奇怪的是，当phone-number-maindiv 的顶部与 齐平时extras，文本如何在我不做任何事情的情况下完美地向下移动。

我的问题是：我怎样才能使phone-numberdiv 在 div 之后立即开始search？

这是该网站，如果您想查看它： http: //mentatescholars.com/。

4

3 回答 3

2

#search是浮动的，.phone-number不是。如果添加clear:both到.phone-number <div />您将看到正确的布局。

float从文档流中删除元素。检查 uot 此链接以获取更多信息：http ://www.alistapart.com/articles/css-floats-101/

于 2013-01-07T08:29:26.193 回答
1

那是因为你有浮动元素。你的“搜索” div 是浮动的，没有明确的。在 phone-number 元素的 CSS 中使用clear:both它会正常工作

如果您希望数字search在高度为search30px 并摆脱提交按钮的边距底部后正确。

于 2013-01-07T08:34:18.947 回答
0

通过降低高度使#search 块更小，假设为 30px。

于 2013-01-07T08:26:42.697 回答