Question

我试图将id =“header”向上移动并直接在id =“main_title”旁边移动我不知道为什么我不能让它向上移动。似乎“main_title”阻挡了它。

HTML代码：

<html>
<head>
    <title>Programming Tutorials</title>

    <link href="stylesheet.css"; type="text/css"; rel="stylesheet" />
    <link rel="stylesheet"; type="text/css"; href="http://fonts.googleapis.com/css?family=Open+Sans|Josefin+Slab|Lato|Bitter|Ubuntu" />  <!-- link for different font-families -->

</head>

<body>

    <div class="title">

        <p id="main_title"> <strong>Programming Tutorials</strong></p>
            <div id="header"></div>
        <p id="sub_title"><em>Begin Learning a New Language Today!</em></p>
    </div>
</body>
</html>

CSS代码：

body {
    overflow-y: scroll;
    overflow-x: scroll;
    background-color: #3399FF;
}

#main_title {
    font-family: 'Ubuntu';
    font-size: 50px;
    color: white;
    font-variant: small-caps;
    margin: 0 0 0 40px;
    display: inline-block;
}

#sub_title {
    font-family: 'Josefin Slab';
    font-size: 25px;
    color: white;
    margin: 50px 0 0 100px;
    display: inline-block;
}

#header {
    background-color: #00eaa8;
    width: 750px;
    height: 50px;
    margin: 0 0 0 550px;
    display: inline-block;
}

Answer 1

将background-color: #00eaa8;添加到#main_title

即

#main_title {
font-family: 'Ubuntu';
font-size: 50px;
color: white;
font-variant: small-caps;
margin: 0 0 0 40px;
display: inline-block;
background-color: #00eaa8;
}

与#sub_title

类似

在HTML </div>中移动<div>元素

1 个答案: