Question

我正在开发一个网站。

该网站处于非常早期的状态，我的问题是页面顶部的标题。我想将Mainline“PersIntra”站在带有“注销按钮”的小盒子旁边而不是它上面。我试着用我的CSS做这个工作。我试过嵌套div。

标题越来越垂直。我想使标题文本大小更大，而标题本身不需要变宽，因为文本不在注销框旁边而是在文本框上。

这是一些链接，告诉你我的意思。（在文中描述很复杂。）

网站是丹麦语，但这不应该阻止你看到我的问题（截图..）。

这是html：

<div id="header">
            <h2> PersIntra </h2>
        
        
            <div id="border">
            Velkommen <?php echo $_SESSION['enummer']; ?> <br>
            Du har 1 ny besked <br>
            <a href="logout.php" style="color: white">Log Ud</a> <br>
            </div>
            
        </div>
        </div>

这是css：

#header {
    background-color:#66cc33;
    color:white;
    text-align:center;
    padding:5px;
    border: 10px solid;
    border-radius: 25px;
}

#border {
    width: 150px;
    padding: 5px;
    border: 5px solid navy;
    margin: 25px;
    border-style: solid;
    border-color: #eeeeee;
}

Answer 1

尝试编辑你的CSS。

#header {
    background-color:#66cc33;
    color:white;
    text-align:center;
    padding:5px;
    border: 10px solid;
    border-radius: 25px;
}

#header h2 {
    margin-top:50px;
    float:right;
    margin-right:300px;    
}

#border {
    width: 150px;
    padding: 5px;
    border: 5px solid navy;
    margin: 25px;
    border-style: solid;
    border-color: #eeeeee;
}

Answer 2

有很多方法可以做这种事情。一种是将标题浮动到左侧并以内联方式显示标题和登录框，如下所示：

#header {
    background-color:#66cc33;
    color:white;
    text-align:center;
    padding:5px;
    border: 10px solid;
    border-radius: 25px;
}
h2 {
  float: left;
  display: inline;
  width: 80%;
  font-size: 2em;
}
#border {
  display: inline;
  width: 20%;
    width: 150px;
    padding: 5px;
    border: 5px solid navy;
    margin: 25px;
    border-style: solid;
    border-color: #eeeeee;
}

如果您尝试快速启动并运行，可以考虑使用像bootstrap（http://getbootstrap.com/）这样的CSS框架。如果您正在尝试学习CSS，我建议您下载类似框架的代码和/或在开放开发工具的情况下查看网站，并探索他们正在做的事情。

希望有所帮助。

Answer 3

如果你想让文字更大或移动而不影响其他内容，你可以这样：

  #header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
position: relative;
}

 #header h2 {
position: absolute;
top: 0;
left: 25px;    
}

Answer 4

我只想将其添加到$http.post('testData.json', data) .success(function (data,status) { console.log("Post success"); })：

#border

并添加位置：相对于周围的元素：

#border {
  position: absolute;
  bottom: 20px
  left: 20px;
}

方式#header { position: relative; }不会在周围元素中占用任何空间，您可以将标题居中对齐而不会出现问题。

标题maintitle样式问题

4 个答案: