это довольно неприятно ...
в основном я создаю menubar на сайте и использую css sprite для создания эффекта наведения, когда изображение меняется при наведении курсора на него.это работает нормально, но я не могу отобразить несколько изображений встроенными, потому что мне нужно использовать display: block в css для класса sprite / hover, чтобы он работал.
вот часть кода css, который яиметь:
.x a {display:block; width:100px; height:100px; overflow:hidden;}
.x a:hover img {margin-left:-100px;}
/* ie6 needs this fix*/
.x a:hover {zoom:1;}
, а затем вот код в файле php (это часть темы WordPress, этот бит собирается в файле header.php):
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
note: используемое изображение является горизонтальным спрайтом, поэтому два изображения объединяются в одно (100x100 превращается в 200x100).
это само по себе работает нормально, но потом, когда я добавляю к нему что-то вроде:
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
<div class='x'><a href='#2' alt='#2'><img src='#2' /></a></div>
это заставляет его перейти на новую строку.я подумал, что это может быть проблема заполнения, когда он переполняется в строке, но я попытался сделать только два изображения (общая площадь, может быть, 210 пикселей), и он находится в области контейнера 911 пикселей и все еще переходит на новую строку.
Я пытался использовать теги , таблицы, встроенный блок и некоторые другие вещи, но все еще безуспешно.В какой-то момент я получил его, чтобы он оставался встроенным, но затем изображение было расположено ниже всех остальных, в правильном горизонтальном положении, но в неправильном вертикальном положении.
цель состоит в том, чтобы иметь около 8 100x100 изображений все подрядстрока меню, с одним интервалом между ними, в контейнере шириной 911 пикселей.все они будут в классе 'x', поэтому изображение будет меняться при наведении на них.
извините за то, что написал так много, но хотел, чтобы это было ясно.пожалуйста помогите!