Отступ после списка

Xiss

Осваиваюсь на форуме
21
0 / 0

Добрый день, я не являюсь профессиональным разработчиком и создание сайта для меня своего рода хобби, поэтому комуто мой вопрос покажется не сколько глупым.
Не получается задать отступ после списка, попробовал несколько вариантов и максимум что удалось так это добавить отступ от начала списка, но это по понятным причинам не подходит...
Вот пример, собранный на основе реального:

Код

<html>
<head>
	<style type="text/css">
		ul.listTwoCol {
			list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNjdCMjIyMEE2NTlERTExQTI3RUUwMUE0M0Y4QzA1MyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MDA4RjE4N0FFQzMxMURGQkY3QUMwQTRCQUMwNjhFRiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MDA4RjE4NkFFQzMxMURGQkY3QUMwQTRCQUMwNjhFRiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAxODAxMTc0MDcyMDY4MTE5OTRDQUNCQ0Q3MDFGOUM2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE2N0IyMjIwQTY1OURFMTFBMjdFRTAxQTQzRjhDMDUzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+6QHsgAAAAPRJREFUeNpifPjwodjdxYtFvz5+3PPt+XN9TnFxlj/fvp1QioycKair+4o5VF3d9sWBA1v/fP2qyyYgwMvEysr9+9Mn9fcXL3qxCQqeZfYXF58CFNT59/s3AxMzMwMIMLOzM/z6+JHj440bbCyMTEzWLNzcDAyMjAxAhQw/371jgIH/f//as/z//5+BEaSLg4Ph/79/YIWsPDxA2f8MTGxsjEysfHxnQaqBJoEx0B0MLFxcDCBT2YWEzjKJWVjMBUp8giliZmMDG8/IzPxJxMxsDnN1by8/u7Dw7q9PnogD7eQDKvoO1H1S1senSkhf/xlAgAEADS1MA4ySco8AAAAASUVORK5CYII=')!important;
			width: 100%;
			margin-top: 25px;
		}

		ul.listTwoCol li {
			width: 400px;
			margin: 7px 0;
			line-height: 0.55em;
			list-style-position: inside;
			padding-left: 30px;
			float: left;
		}
	</style>
</head>
<body>
<table width="1000px" border="1px">
	<tr>
		<td>
			<ul class="listTwoCol">
				<li>1 элемент</li>
				<li>2 элемент</li>
				<li>3 элемент</li>
				<li>4 элемент</li>
				<li>5 элемент</li>
				<li>6 элемент</li>
				<li>7 элемент</li>
			</ul>
		</td>
	</tr>
</table>

</body>
</html>

Надеюсь на помощь, спасибо.

Записан

Shustry

Moderator
6434
745 / 3

Re: Отступ после списка

« Ответ #1 : 30.05.2014, 17:57:05 »

Вместо:

Код: css

ul.listTwoCol li {
margin: 7px 0;
padding-left: 30px;
}

Сделайте:

Код: css

ul.listTwoCol li {
margin: 0;
padding-left: 7px 0 30px;
}

Записан

NortonFox

Захожу иногда
441
43 / 0

Re: Отступ после списка

« Ответ #2 : 30.05.2014, 18:11:29 »

Код: css

padding-left: 7px 0 30px; > padding: 7px 0 30px;

Записан

Я знаю только то, что ничего не знаю

Shustry

Moderator
6434
745 / 3

Re: Отступ после списка

« Ответ #3 : 30.05.2014, 18:22:00 »

NortonFox, точ. Я опечатался там выше. Скопипастил и не подтёр.

Записан

NortonFox

Захожу иногда
441
43 / 0

Re: Отступ после списка

« Ответ #4 : 30.05.2014, 18:39:09 »

Да я так, на всякий случай, а то вставит и не получиться, а ошибку найти не реально будет.

Записан

Я знаю только то, что ничего не знаю

Xiss

Осваиваюсь на форуме
21
0 / 0

Re: Отступ после списка

« Ответ #5 : 31.05.2014, 03:43:20 »

Спасибо за ответы, но видимо я не совсем ясно выразился, если сделать как написано выше то изменится расстояние между элементами списка. То есть было вот так:

Стало вот так:

А мне нужно отрегулировать расстояние от последнего элемента в списке до следующего элемента, в данном случае от 7го элемента до нижней границы таблицы, не изменяя при этом расстояние между элементами.

« Последнее редактирование: 31.05.2014, 03:56:32 от Xiss »

Записан

NortonFox

Захожу иногда
441
43 / 0

Re: Отступ после списка

« Ответ #6 : 31.05.2014, 07:52:14 »

Тогда в место:

Код: css

ul.listTwoCol {
			list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNjdCMjIyMEE2NTlERTExQTI3RUUwMUE0M0Y4QzA1MyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MDA4RjE4N0FFQzMxMURGQkY3QUMwQTRCQUMwNjhFRiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MDA4RjE4NkFFQzMxMURGQkY3QUMwQTRCQUMwNjhFRiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAxODAxMTc0MDcyMDY4MTE5OTRDQUNCQ0Q3MDFGOUM2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE2N0IyMjIwQTY1OURFMTFBMjdFRTAxQTQzRjhDMDUzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+6QHsgAAAAPRJREFUeNpifPjwodjdxYtFvz5+3PPt+XN9TnFxlj/fvp1QioycKair+4o5VF3d9sWBA1v/fP2qyyYgwMvEysr9+9Mn9fcXL3qxCQqeZfYXF58CFNT59/s3AxMzMwMIMLOzM/z6+JHj440bbCyMTEzWLNzcDAyMjAxAhQw/371jgIH/f//as/z//5+BEaSLg4Ph/79/YIWsPDxA2f8MTGxsjEysfHxnQaqBJoEx0B0MLFxcDCBT2YWEzjKJWVjMBUp8giliZmMDG8/IzPxJxMxsDnN1by8/u7Dw7q9PnogD7eQDKvoO1H1S1senSkhf/xlAgAEADS1MA4ySco8AAAAASUVORK5CYII=')!important;
			width: 100%;
			margin-top: 25px;
		}

Сделайте:

Код: css

ul.listTwoCol {
			list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNjdCMjIyMEE2NTlERTExQTI3RUUwMUE0M0Y4QzA1MyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MDA4RjE4N0FFQzMxMURGQkY3QUMwQTRCQUMwNjhFRiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MDA4RjE4NkFFQzMxMURGQkY3QUMwQTRCQUMwNjhFRiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAxODAxMTc0MDcyMDY4MTE5OTRDQUNCQ0Q3MDFGOUM2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE2N0IyMjIwQTY1OURFMTFBMjdFRTAxQTQzRjhDMDUzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+6QHsgAAAAPRJREFUeNpifPjwodjdxYtFvz5+3PPt+XN9TnFxlj/fvp1QioycKair+4o5VF3d9sWBA1v/fP2qyyYgwMvEysr9+9Mn9fcXL3qxCQqeZfYXF58CFNT59/s3AxMzMwMIMLOzM/z6+JHj440bbCyMTEzWLNzcDAyMjAxAhQw/371jgIH/f//as/z//5+BEaSLg4Ph/79/YIWsPDxA2f8MTGxsjEysfHxnQaqBJoEx0B0MLFxcDCBT2YWEzjKJWVjMBUp8giliZmMDG8/IzPxJxMxsDnN1by8/u7Dw7q9PnogD7eQDKvoO1H1S1senSkhf/xlAgAEADS1MA4ySco8AAAAASUVORK5CYII=')!important;
			width: 100%;
			margin: 25px 0 30px;
		}

А предыдущие изменения верните в исходное состояние.

Записан

Я знаю только то, что ничего не знаю

Xiss

Осваиваюсь на форуме
21
0 / 0

Re: Отступ после списка

« Ответ #7 : 31.05.2014, 14:12:20 »

Я так уже пробовал, такое ощущение что расстояние отсчитывается от верхней границы списка, то есть если написать margin: 25px 0 130px;, то отступ снизу получится примерно 10px (высота списка 96px + отступ сверху 25px), а мне нужно именно снизу отступ, потому что высота списка переменная.

Код сейчас такой:

Код

<html>
<head>
	<style type="text/css">
		ul.listTwoCol {
			list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNjdCMjIyMEE2NTlERTExQTI3RUUwMUE0M0Y4QzA1MyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MDA4RjE4N0FFQzMxMURGQkY3QUMwQTRCQUMwNjhFRiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MDA4RjE4NkFFQzMxMURGQkY3QUMwQTRCQUMwNjhFRiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAxODAxMTc0MDcyMDY4MTE5OTRDQUNCQ0Q3MDFGOUM2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE2N0IyMjIwQTY1OURFMTFBMjdFRTAxQTQzRjhDMDUzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+6QHsgAAAAPRJREFUeNpifPjwodjdxYtFvz5+3PPt+XN9TnFxlj/fvp1QioycKair+4o5VF3d9sWBA1v/fP2qyyYgwMvEysr9+9Mn9fcXL3qxCQqeZfYXF58CFNT59/s3AxMzMwMIMLOzM/z6+JHj440bbCyMTEzWLNzcDAyMjAxAhQw/371jgIH/f//as/z//5+BEaSLg4Ph/79/YIWsPDxA2f8MTGxsjEysfHxnQaqBJoEx0B0MLFxcDCBT2YWEzjKJWVjMBUp8giliZmMDG8/IzPxJxMxsDnN1by8/u7Dw7q9PnogD7eQDKvoO1H1S1senSkhf/xlAgAEADS1MA4ySco8AAAAASUVORK5CYII=')!important;
			width: 100%;
			margin: 25px 0 130px;
		}

		ul.listTwoCol li {
			width: 400px;
			margin: 7px 0;
			line-height: 0.55em;
			list-style-position: inside;
			padding-left: 30px;
			float: left;
		}
	</style>
</head>
<body>
<table width="1000px" border="1px">
	<tr>
		<td>
			<ul class="listTwoCol">
				<li>1 элемент</li>
				<li>2 элемент</li>
				<li>3 элемент</li>
				<li>4 элемент</li>
				<li>5 элемент</li>
				<li>6 элемент</li>
				<li>7 элемент</li>
			</ul>
		</td>
	</tr>
</table>

</body>
</html>

« Последнее редактирование: 31.05.2014, 14:16:03 от Xiss »

Записан

NortonFox

Захожу иногда
441
43 / 0

Re: Отступ после списка

« Ответ #8 : 31.05.2014, 14:54:49 »

Читайте про слияние отступов по вертикали, если вы зададите двум элементам отступ и с низу и с верху, то возьмется самый большой, именно по этому создается ощущение, что что то не так.

Записан

Я знаю только то, что ничего не знаю

Xiss

Осваиваюсь на форуме
21
0 / 0

Re: Отступ после списка

« Ответ #9 : 31.05.2014, 16:27:11 »

Цитата: NortonFox от 31.05.2014, 14:54:49

Читайте про слияние отступов по вертикали, если вы зададите двум элементам отступ и с низу и с верху, то возьмется самый большой, именно по этому создается ощущение, что что то не так.

Почитал, но 130 же и есть самый большой отступ и даже если 60, все равно самый большой.

Записан

Xiss

Осваиваюсь на форуме
21
0 / 0

Re: Отступ после списка

« Ответ #10 : 31.05.2014, 16:30:10 »

Вроде решил проблему, указал для стиля списка:

Код

			margin: 0;
			padding: 0 0 25px;

Но после переноса на реальный список все опять перестало работать, почемуто высота для списка сделалось нулевой.
Указал для списка

Код

overflow: auto;

и вроде все стало как нужно.

Спасибо за помошь.

Записан

Как уменьшить отступ между Title и Components в шаблоне Helix3 Автор artem_wrong	Ответов: 21 Просмотров: 7107	17.06.2022, 22:42:47 от Scaltro
Не отображаются маркеры списка Автор Concolor	Ответов: 6 Просмотров: 3962	24.04.2021, 18:45:49 от Concolor
Как сделать отступ от абсолютного элемента? Автор wishlight	Ответов: 6 Просмотров: 3332	20.04.2019, 00:06:28 от dmitry_stas
Убрать отступ сверху Автор Yukana	Ответов: 14 Просмотров: 7404	08.01.2019, 18:59:16 от beliyadm
Как сделать отступ от шапки сайта? Автор NAaTa	Ответов: 6 Просмотров: 4646	22.05.2018, 17:41:24 от NAaTa

Отступ после списка - Вопросы по CSS

Новости Joomla

‼️ 👩‍💻 Обновление безопасности для Tassos Framework!

👩‍💻 Joomla включена в программу Google Summer of Code 2026.

Вышли релизы Joomla 6.0.3 и Joomla 5.4.3

Xiss

Отступ после списка

Shustry

Re: Отступ после списка

NortonFox

Re: Отступ после списка

Shustry

Re: Отступ после списка

NortonFox

Re: Отступ после списка

Xiss

Re: Отступ после списка

NortonFox

Re: Отступ после списка

Xiss

Re: Отступ после списка

NortonFox

Re: Отступ после списка

Xiss

Re: Отступ после списка

Xiss

Re: Отступ после списка

Похожие темы