Question

该网站应如下所示： http://funedit.com/imgedit/soubory/small_17663057361396452975.jpg

但它实际上看起来像： http://funedit.com/andurit/（它会剪切该警告图像，并将其移动到左侧网站而不是右侧。

someboddy可以帮我解释一下我做错了什么，我是CSS的新手

我的HTML：

 <body> 
 <div class="top-panel">
    <div id="center"> <a class="top-button" href="#"></a>
       <span class="text">Prave hraje <b>5000</b> hracov na <b>150</b> serveroch!</span>
       <span class="panel">Registruj sa zdarma nebo</span>
        <input type="text">
        <input type="text">
        <input type="image" id="login-button" src="images/login_button.png" alt="Submit">
       <div class="tournament"> Night Cup 2014 - Sledujte priamy prenos! </div> 
    </div>
 </div>
 </body>

我的CSS：

body {
    background-image:url('images/background.png');
    background-color:#cccccc;
    margin: 0 auto;
}
#center {
    width: 1030px;
    margin: 0 auto;
    /*display: inline-block; */
}
.top-panel {
    background-image: url("images/top_panel.png");
    background-repeat: repeat-x;
    background-position: center;
    height: 43px;
    padding-top:5px;
    display: block;
}
a.top-button {
    background-image: url("images/top_button.png");
    height: 37px;
    width: 141px;
    background-repeat: no-repeat;
    display: inline-block;
    margin-left: 50px;
}
.text {
    color: #9c9c9c;
    padding: 0px 10px;
}
.panel {
    color: #6ab1ed;
    padding: 0px 350px;
    display: inline-block;
}
input{
    vertical-align:top;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    text-align: center;
    position: relative; left: 510px; top: 2px;
}
span{
    position: absolute;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    text-align: center;    
}
span b{
    font-weight:bold;
}
#login-button{
    /*background-image: url("images/login_button.png");   uz je to v HTML*/
    height: 27px;
    width: 81px;
    line-height: 27px;
    display: inline-block;
    position: relative; left: 510px; top: 4px; 
}
.tournament{
    background-image: url("images/warning.png");
    background-repeat: no-repeat;
    text-align: right;
    display: block;
    color: #d4d4d4;
}

Answer 1

尝试添加：

body { background-size: 100%;}
.tournament{
  width: 30%;
  right: 10%;
  position: absolute;
  height: 30px;
}

Answer 2

您将图像设置为背景图像。虽然'text-align'确实将文本向右移动，但背景图像不受此影响。

只需将代码更改为：

<div class="tournament"
    <img src="..." /> 
    Night Cup 2014 - Sledujte priamz prenos!
</div>

所以它会与文字对齐。

CSS切断了我的形象

2 个答案: