Question

我正在使用CSS格式化页面的标题。我无法正常显示<div>（班级为header_button）。我试图在顶部有一个静态标题，里面有一个按钮，在右边。相反，它出现在右侧（在正确的区域），除了标题区域之外。首先，这是标题的样式：

div.header {
// Used to keep header in the same position on the page
position: fixed;
height: 50px;
background: -webkit-linear-gradient(#191919, #474747); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#191919, #474747); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#191919, #474747); /* For Firefox 3.6 to 15 */
background: linear-gradient(#191919, #474747); 
background-color: black;
margin: 0px auto;
width: 100%;
// Used to keep the header at the top
top: 0px;
}

这些是应该放在标题内的div的样式。

div.header_button {
color: #ccffcc;
border-radius: 10%;
background-color: #3333ff;
font-size: 24px;
font-weight: 200;
text-align: center;
padding: 2px;
width: 4%;
text-align: center;
// Used to keep the button almost on the right edge
margin-left: 94%;
}

这是我用来将header_button div嵌套在header内部的HTML。

<div class="header" >
    <p>
        Testing Text
    </p>
    <div class="header_button">
        Test
    </div>

</div>

我做错了什么？

感谢您的反馈意见。

Answer 1

Demo

HTML：

<div class="header" >
    <div class="header_button">
        Test
    </div>
    <p>
        Testing Text
    </p>
</div>

CSS：

div.header_button {
    float: right;
}

无法使用CSS嵌套div

1 个答案: