html - 让 css 问题 div href 出现在其他人后面，多米诺骨牌效应

Question

我有一个 href 按钮，我将其样式设置为具有蓝色填充边框。这是它的样子。

它堆叠在标题和搜索栏后面，我不明白为什么。

谁能帮帮我。这是 3 个 div 的 html 代码。

<div id="topnav">
    <span>Home &#187; Tutorials &#187; How to show an example</span>
</div>
<div id="main">
    <div id="buttons">
        <a class="btn" href="">Recent</a>
    </div>
    <div class="form-main">
        <form class="form-wrapper">
            <input type="text" id="search" placeholder="Search for tutorials ...">
            <select>
                <option value="7" selected="selected">All</option>
                <option value="1">Newbie</option>
                <option value="2">Beginner</option>
                <option value="3">Novice</option>
                <option value="4">Educated</option>
                <option value="5">Expert</option>
                <option value="6">Professional</option>
            </select>
            <input type="submit" value="Search" id="submit">
        </form>
    </div>
</div>
</div>

这是CSS代码:

#topnav {
    background-color: #f2f2f2;
    border-radius: 5px 5px 0 0;
    display: block;
    height: 30px;
    line-height: 25px;
    padding: 5px;
}
#main {
    padding: 5px 15px;
}

#buttons {
    text-align: center;
}
.form-main {
    background-color: #f6f6f6;
    border-color: #dedede #bababa #aaa;
    border-radius: 3px;
    padding: 8px;
}
.btn {
    background: none repeat scroll 0 0 #2972a3;
    border-radius: 5px;
    color: #ffffff;
    font-family: Arial;
    font-size: 17px;
    padding: 10px 20px;
    text-decoration: none;
}

Answer 1

你被定位在它的父级 #buttons 的大小之后，它根据你的内容的高度得到它的高度，它是 20px，但是你的实际高度是 40px，这意味着 10px，顶部和底部，将在#buttons div 之外。

尝试将 display: inline-block 添加到您的按钮类 (.btn) 以使父项获得包括填充在内的大小。

在这里查看:http://jsfiddle.net/yc31unad/