CSS将元素移动到顶部而不使用负值答案

【问题标题】：CSS move element to top without using negative valueCSS将元素移动到顶部而不使用负值
【发布时间】：2014-04-02 07:38:24
【问题描述】：

这可能是非常简单的事情，但我只是不知道如何在不使用诸如填充或边距之类的负值的情况下做到这一点，我的网站看起来像：

它应该看起来像：

所以我需要显示 atm 下面的文本，与按钮在同一行

我的 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>

谁能解释我如何解决它？

【问题讨论】：

提出一个新问题的意义何在？ stackoverflow.com/questions/22798500/…
将第一个主题中的所有信息提供给所有人，因为在最后一个主题中我没有也无法编辑它：)
好吧，我在另一篇文章中回答了您的问题 5 次。将所有内容放在必须粘在顶部的主 div 中，并按照我告诉你的 div 使用 position:absolute;

标签： html css

【解决方案1】：

我想这就是你想要的：

见fiddle

HTML

 <body>
 <div class="top-panel">
    <div class="center"> <a class="top-button" href="#"></a>
       <span class="text">Prave hraje 5000 hracov na 150 serveroch!</span>
       <span class="panel">Registruj sa zdarma nebo</span>
    </div>
 </div>
 </body>

CSS

.center {
    width: 1030px;
    margin: 0 auto;
    display: inline-block;
}
.top-panel {
    background-color: black;
    background-repeat: repeat-x;
    background-position: center;
    height: 43px;
    padding-top:5px;
    display: block;
}
a.top-button {
    background-color: blue;
    height: 37px;
    width: 141px;
    background-repeat: no-repeat;
    display: inline-block;
}
.text {
    color: #9c9c9c;
    padding: 0px 160px;
    line-height: 43px;
}
.panel {
    color: #6ab1ed;
}

【讨论】：

是的，伙计，你是对的！非常感谢，也许有一个小问题，是否可以将该文本向上移动 1-2 像素？如果是的话，那就完美了
是的，你可以给 <span> 元素绝对定位。或将<span> 转回<div>，如果您希望元素相对定位，则给它display: inline-block。

【解决方案2】：

这有一些问题。

1。您的所有文本都包含在多个块元素中。

像<div>s 这样的块元素在它们自己的行上。用 inline-block 替换它可以解决这个问题：

div.top-panel
{
    display:block;
}

div
{
    display: inline-block;
}

2。你的按钮也是块元素

因此它不能与您的文本共享同一行。

这是一个very ugly fiddle，但至少所有元素都在同一行。

【讨论】：