Question

这可能是非常简单的事情，但我不知道怎么做而不使用填充或带负值的边距，我的网站看起来像：

它应该看起来像：

所以我需要在按钮

的同一行显示低于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>

有人可以解释一下如何解决它吗？

Answer 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;
}

Answer 2

这有一些问题。

1。您将所有文本都放在多个块元素中。

像<div>这样的块元素都在他们自己的行上。用内联块替换它解决了这个问题：

div.top-panel
{
    display:block;
}

div
{
    display: inline-block;
}

2。您的按钮也是一个块元素

所以它不能与你的文字共享同一行。

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

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

2 个答案:

1。您将所有文本都放在多个块元素中。

2。您的按钮也是一个块元素