这可能真的很简单，但我只是不知道如何不使用负值的 padding-top 之类的东西，我的网站看起来像:
我的 CSS 是:
.center {
width: 1030px;
margin: 0 auto;
}
.top-panel {
background-image: url("images/top_panel.png");
background-repeat: repeat-x;
background-position: center;
height: 43px;
padding-top:5px;
}
a.top-button{
background: url("images/top_button.png");
height: 37px;
width: 141px;
background-repeat: no-repeat;
display: block;
}
.text {
color: #9c9c9c;
padding: 0px 160px;
line-height: 43px;
position: relative;
}
.panel {
color: #6ab1ed;
}
和我的 HTML:
<body>
<div class="top-panel">
<div class="center">
<a class="top-button" href="#"></a>
<div class="text">Prave hraje 5000 hracov na 150 serveroch!
<div class="panel">Registruj sa zdarma nebo</div></div>
</div>
</div>
</body>
有人真的可以简单地解释一下我该怎么做吗？
最佳答案
我认为您只是在没有必要的地方弄乱了不同的 HTML 元素。 试试这个:
CSS:
.top-panel {
position: relative;
background-image: url("images/top_panel.png");
background-repeat: repeat-x;
background-position: center;
height: 43px;
padding-top:5px;
}
a.top-button{
float: left;
background: url("images/top_button.png");
height: 37px;
width: 141px;
background-repeat: no-repeat;
display: block;
}
.text {
position: inline;
color: #9c9c9c;
position: relative;
}
.panel {
position: inline;
color: #6ab1ed;
}
HTML:
<body>
<div class="top-panel">
<div class="center">
<a class="top-button" href="#"></a>
<p><span class="text">Prave hraje 5000 hracov na 150 serveroch!</span><br/>
<span class="panel">Registruj sa zdarma nebo</span></p>
</div>
</div>
</body>
关于html - CSS 在不使用负值的情况下将某些内容置于顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22798500/