Как обнулить отступ маркера в списке?

346
26 декабря 2016, 23:06

Как обнулить или изменить отступ маркера в списке. По умолчанию отступ маркера уже задан, возможно ли его отменить с помощью padding или margin другим способом. Я решил через margin-left: -N px. Код ниже

html, 
body { 
	margin: 0; 
	padding: 0; 
} 
 
.main-menu { 
	width: 250px; 
	margin: 10px; 
	padding: 0; 
	background: #3296ad; 
	list-style-position: inside; 
} 
 
.main-menu li { 
	padding: 10px 15px; 
	margin-bottom: -3px; 
	list-style-type: circle; 
	color: #ffffff; 
	border: 3px solid #b4e6e5; 
} 
 
.main-menu li a { 
	/* margin-left: -15px;*/ 
	text-decoration: none; 
	color: #f5ffe7 
}
<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Menu</title> 
	<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
	<nav> 
		<ul class="main-menu"> 
			<li><a href="#">Lorem ipsum.</a></li> 
			<li><a href="#">Beatae, enim.</a></li> 
			<li><a href="#">Perferendis, unde!</a></li> 
			<li><a href="#">Inventore, assumenda.</a></li> 
			<li><a href="#">Recusandae, quae?</a></li> 
			<li><a href="#">Iusto, quia.</a></li> 
		</ul> 
	</nav>	 
</body> 
</html>

Answer 1

Есть еще такой вариант before:

html, 
body { 
	margin: 0; 
	padding: 0; 
} 
 
.main-menu { 
	width: 250px; 
	margin: 10px; 
	padding: 0; 
	background: #3296ad; 
} 
 
.main-menu li {	 
    margin-bottom: -3px; 
    color: #ffffff; 
    border: 3px solid #b4e6e5; 
    padding: 10px 15px; 
    position: relative; 
    padding-left: 20px; 
} 
 
.main-menu li:before { 
  content: ''; 
  list-style-type: circle; 
  display: list-item; 
  float: left; 
  width: 1px; 
  margin: 0 -10px 0 10px; 
} 
 
.main-menu li a { 
	text-decoration: none; 
	color: #f5ffe7;    
}
<nav> 
  <ul class="main-menu"> 
    <li><a href="#">Lorem ipsum.</a></li> 
    <li><a href="#">Beatae, enim.</a></li> 
    <li><a href="#">Perferendis, unde!</a></li> 
    <li><a href="#">Inventore, assumenda.</a></li> 
    <li><a href="#">Recusandae, quae?</a></li> 
    <li><a href="#">Iusto, quia.</a></li> 
  </ul> 
</nav>

Но тоже с отрицательным отступом, решение которое вполне приемлемое (как и Ваш margin-left: -15px;) !

Также из той серии, что и отрицательный отступ - это a {translateX(-15px); }

READ ALSO
Подключение js библиотек [требует правки]
HTML

Подключение js библиотек [требует правки]

Ознакомился со сборкой gulp, разобрался как минифицировать js и css файлыВ gulp файле я минифицирую js библиотеки в один файл с названием libs

 372
Браузер не отображает код JavaScript c Html [требует правки]
HTML

Браузер не отображает код JavaScript c Html [требует правки]

вот, к примеру, этот код файла html отображается как нужно:

 352
Перенос слов в input
HTML

Перенос слов в input

Столкнулся с затруднением переноса в #textName,#textMail,#textMessage, печатает в одну строку до посиненияЗнаю что textarea помогает с этим делом но выглядит...

 428
Стоит ли стремиться убрать имя скрипта отправки данных формы из HTML-кода для повышения безопасности?
HTML

Стоит ли стремиться убрать имя скрипта отправки данных формы из HTML-кода для повышения безопасности?

Допустим, я не хочу, чтобы в HTML-коде формы авторизации содержалось имя скрипта проверки данных таким образом:

 325