Блог

Я пытаюсь отобразить 2 ссылки со стрелками рядом, но получаю некоторые ошибки css.

Мой HTML-код приведен ниже:

  <div>
    <a href="javascript:void(0);" id="move_down"> <span class="down_arrow">amp;nbsp;</span> </a>
    <a href="javascript:void(0);" id="move_up">  <span class="up_arrow">amp;nbsp;</span></a>
    </div>
  

CSS:

 .down_arrow{
display:block;
background: url(../images/down_arrow.png) no-repeat left center;
}

.up_arrow{
display:block;
background: url(../images/up_arrow.png) no-repeat left center;
}
  

В настоящее время изображения отображаются одно под другим. Я хочу, чтобы они отображались рядом.
Однако, если я удалю display:block; в css, изображение не будет отображаться должным образом.

Я также попытался удалить display: block и поместить float: left для обоих классов, но все еще не работает.

Я был бы признателен, если бы кто-нибудь мог предоставить мне решение.

Большое-большое спасибо.

Чтобы сделать изображения плавающими, вы должны указать ширину элемента и задать float свойство. CSS должен выглядеть следующим образом

 .down_arrow{
display:block;
background: url(../images/down_arrow.png) no-repeat left center;
float:left;
width:100px;
}

.up_arrow{
display:block;
background: url(../images/up_arrow.png) no-repeat left center;
float:left;
width:100px;
}
  

Смотрите http://jsfiddle.net/fq3Eg для вашего примера я настроил CSS, и это работает.

На самом деле вы можете удалить теги SPAN и сделать что-то вроде этого…

Демо-версия: http://jsfiddle.net/wdm954/juGME/1

Демонстрация 2: (с изображениями стрелок): http://jsfiddle.net/wdm954/juGME/2 /

 <div>
    <a href="javascript:void(0);" id="move_down" class="down_arrow"></a>
    <a href="javascript:void(0);" id="move_up" class="up_arrow"></a>
</div>
  

CSS…

 #move_down, #move_up {
    float: left; 
}
.down_arrow, .up_arrow {
    width: 50px;
    height: 50px;
    background-color: #ccc;
}
.down_arrow {
    background-image: url(path/to/img);
}
.up_arrow {
    background-image: url(path/to/img);
}