CSS位置顶部的东西，而不使用负值 [英] CSS position something on top without using negative values
本文介绍了CSS位置顶部的东西，而不使用负值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这可能是很简单的事情，但我只是不知道如何做，而不使用像padding-top负值，我的网站看起来像：
< img src =https://i.stack.imgur.com/cqW9w.jpgalt =http://funedit.com/imgedit/soubory/small_9858499121396392876.jpg>
我的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-buttonhref =＃>< / a>
< div class =text> Prave hraje 5000 hracov na 150 serveroch！
< div class =panel>注册人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-buttonhref =＃>< / a>
< p>< span class =text> Prave hraje 5000 hracov na 150 serveroch！< / span>< br /
< span class =panel>注册商店< / span>< / p>
< / div>
< / div>
< / body>
this is probably really simple thing but i just dont know how to do it without using something like padding-top with negative values, my site looks like:
My CSS is:
.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;
}
and my 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>
Can somebody really simply explain me how can i do it?
解决方案 I think you just messing with different HTML elements where there is no need to.
Try this:
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>
这篇关于CSS位置顶部的东西，而不使用负值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
