вы должны увидеть этот блог , чтобы установить nodejs с менеджером пакетов
Перед выполнением этой команды. вы показываете прогон sudo apt-get update
, убедитесь, что результат Чтение списков пакетов ... Готово , нет ОШИБКИ
Шаг за шагом (Debian):
sudo apt-get update
установить 6_x
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs
установить 7_x
curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs
Добавьте это:
ul{ list-style-position: inside}
Вот и все!
Вы можете присвоить элементам списка свойство переполнения:
li {
overflow: hidden;
}
Это приведет к тому, что элемент списка будет вести себя правильно: они будут отображаться как квадратный блок, продолжающийся там, где заканчивается изображение. , они не плавно текут влево. Следующим элементом списка будет.
Если вы не беспокоитесь о добавлении javascript, вот сценарий jQuery, который добавит поле к ul, которое перекрывает изображение, чтобы все элементы списка оставались выровненными, а затем присваивает отрицательный маржа к li, которая не перекрывается.
$(function(){
//Define a context so we only move lists inside a specified parent
var context = $("#test_div");
//Build a list of images position a size
var imgRects = [];
var imgs = $("img.left", context);
imgs.each(function(i){
var pos = $(this).position();
pos.right = pos.left + $(this).outerWidth(true);
pos.bottom = pos.top + $(this).outerHeight(true);
imgRects.push(pos);
});
//Process each li to see if it is at the same height of an image
var lis = $("li", context);
lis.each(function(i){
var li = $(this);
if(li.parent().css('marginLeft') != "0px"){
return; //Already moved
}
var top = li.position().top;
for(var j in imgRects){
var rect = imgRects[j];
if(top > rect.top && top < rect.bottom){
li.parent().css('marginLeft', rect.right);
return;
} else if(li.parent().css('marginLeft') != "0px"){
li.css('marginLeft', -1 * rect.right);
}
}
});
});
Я тестировал вашу демонстрационную страницу и jQuery 1.3.2, и он работает в FF3.5 и IE8, потому что изображение находится поверх документа. Если изображение появляется в середине ul, первые li останутся заполненными. Если вам нужно исправить эту проблему, оставьте комментарий, и мы попробуем обновить скрипт.