Я создал неупорядоченный список. Я чувствую, что пули в неупорядоченном списке назойливы, поэтому я хочу их удалить.
Возможно ли иметь список без пуль?
Я создал неупорядоченный список. Я чувствую, что пули в неупорядоченном списке назойливы, поэтому я хочу их удалить.
Возможно ли иметь список без пуль?
Вы можете удалить маркеры, установив list-style-type
, чтобы none
на CSS для родительского элемента (обычно <ul>
), например:
ul {
list-style-type: none;
}
Вы также можете добавить к ним padding: 0
и margin: 0
, если хотите удалить отступы.
Посмотрите Listutorial, чтобы познакомиться с методами форматирования списка.
Если вы используете Bootstrap, у него есть класс "без стиля":
Удалите стиль списка по умолчанию и отступы слева для элементов списка (только непосредственные дочерние элементы).
<ul class="unstyled">
<li>...</li>
</ul>
http://twitter.github.io/bootstrap/base-css.html#typography
<ul class="list-unstyled">
<li>...</li>
</ul>
Bootstrap 3: http://getbootstrap.com/css/#type-lists
Bootstrap 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled
Вам нужно использовать list-style: none;
<ul style="list-style: none;">
<li> ...</li>
</ul>
В CSS стиль
list-style-type: none;
Вам нужно добавить стиль к элементу <ul>
например:
<ul style="list-style: none; ">
<li>Item</li>
...
<li>Item</li>
</ul>
Это удалит пули. Вы также можете добавить CSS в таблицу стилей, как в примерах из предыдущих ответов.
В CSS...
ul {
list-style: none;
}
Небольшое уточнение предыдущих ответов: чтобы сделать более длинные строки более читабельными, если они перетекают на дополнительные строки экрана:
ul, li {list-style-type: none;}
li {padding-left: 2em; text-indent: -2em;}
Используйте следующий CSS:
ul {
list-style-type: none
}
Native:
ul { list-style-type: none; }
Bootstrap:
<ul class="list-unstyled list-group">
<li class="list-group-item">...</li>
</ul>
Примечание: Если вы используете группы списков, тогда нет необходимости в нестационарном списке.
Если вы не можете заставить его работать на уровне <ul>
, вам может понадобиться поместить list-style-type: none;
на уровне <li>
:
<ul>
<li style="list-style-type: none;">Item 1</li>
<li style="list-style-type: none;">Item 2</li>
</ul>
Вы можете создать класс CSS, чтобы избежать этого повторения:
<style>
ul.no-bullets li
{
list-style-type: none;
}
</style>
<ul class="no-bullets">
<li>Item 1</li>
<li>Item 2</li>
</ul>
При необходимости используйте !important
:
<style>
ul.no-bullets li
{
list-style-type: none !important;
}
</style>
Я использовал list-style на ul и li для удаления пуль. Я хотел заменить пули на пользовательский символ, в данном случае "тире". Это дает хороший эффект. Итак, используя эту разметку:
<ul class="dashed-list">
<li>text</li>
<li>text</li>
</ul>
с этим CSS:
ul.dashed-list
{
list-style: none outside none;
}
ul.dashed-list li:before {
content: "\2014";
float: left;
margin: 0 0 0 -27px;
padding: 0;
}
ul.dashed-list li {
list-style-type: none;
}
дает эффект с отступом, который работает, когда текст переносится.
CSS
.liststyle {
list-style-type: none;
}
HTML:
<ul class="liststyle">
<li>Test</li>
</ul>
Вы можете попробовать это
ul {
list-style: none
}
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>
ul
{
list-style-type: none;
}
<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
</ul>
Вы можете удалить маркеры, используя следующий CSS:
ul {
list-style: none; //or list-style-type:none;
}
Вы даже можете добавить свой собственный стиль списка, например:
li:before {
content: '✔';
color:red;
}
Это упорядочивает список по вертикали без маркеров. Всего за одну строчку!
li {
display: block;
}
Вы можете удалить маркеры, используя style="list-style-type:none"
.
Попробуй это:
<ul style="list-style-type:none" >
<li>op1</li>
<li>op2</li>
<li>op2</li>
</ul>
Если вы хотите добиться этого только с помощью чистого HTML, это решение будет работать во всех основных браузерах:
Описание Списки
Просто используя следующий HTML:
<dl>
<dt>List Item 1</dt>
<dd>Sub-Item 1.1</dd>
<dt>List Item 2</dt>
<dd>Sub-Item 2.1</dd>
<dd>Sub-Item 2.2</dd>
<dd>Sub-Item 2.3</dd>
<dt>List Item 3</dt>
<dd>Sub-Item 3.1</dd>
</dl>
Который выдаст список, подобный следующему:
List Item 1
Sub-Item 1.1
List Item 2
Sub-Item 2.1
Sub-Item 2.2
Sub-Item 2.3
List Item 3
Sub-Item 3.1
Пример здесь: https://jsfiddle.net/zumcmvma/2/
Ссылка здесь: https://www.w3schools.com/tags/tag_dl.asp
Я попробовал и заметил:
header ul {
margin: 0;
padding: 0;
}
<ul style="list-style-type:none">
<li>Slack</li>
<li>Stack</li>
<li>Splash</li>
<li>Stick</li>
<li>Stock</li>
<li>Stop</li>
<li>Steal</li>
</ul>
Вы можете удалить "bullets" , установив стиль "list-style-type: none;" Like
ul
{
list-style-type: none;
}
ИЛИ
<ul class="menu custompozition4" style="list-style-type: none;">
<li class="item-507"><a href=#">Strategic Recruitment Solutions</a>
</li>
</ul>
Просто измените ваш list-style-type
list-style
или list-style
в вашем классе на none
для <li>
.
Что-то вроде этого:
li {
list-style-type : none;
}
Также для получения дополнительной информации я перечислю все свойства, которые вы можете назначить для list-style-type
, запустите приведенный ниже код, чтобы увидеть все результаты в одной цели:
.none {
list-style-type: none;
}
.disc {
list-style-type: disc;
}
.circle {
list-style-type: circle;
}
.square {
list-style-type: square;
}
.decimal {
list-style-type: decimal;
}
.georgian {
list-style-type: georgian;
}
.cjk-ideographic {
list-style-type: cjk-ideographic;
}
.kannada {
list-style-type: kannada;
}
.custom:before {
content: '◊ ';
color: red;
}
<ul>
<li class="none">none</li>
<li class="disc">disc</li>
<li class="circle">circle</li>
<li class="square">square</li>
<li class="decimal">decimal</li>
<li class="georgian">georgian</li>
<li class="cjk-ideographic">cjk-ideographic</li>
<li class="kannada">kannada</li>
<li class="none custom">custom</li>
</ul>
Приведенный ниже код является хорошим и простым примером удаления маркеров для неупорядоченного списка.
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List without Bullets</h2>
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Вам нужно использовать css list-style-type: none;
ul {
list-style-type: none;
}
<div class="custom-control custom-checkbox left">
<ul class="list-unstyled">
<li>
<label class="btn btn-secondary text-left" style="width:100%;text-align:left;padding:2px;">
<input type="checkbox" style="zoom:1.7;vertical-align:bottom;" asp-for="@Model[i].IsChecked" class="custom-control-input" /> @Model[i].Title
</label>
</li>
</ul>
</div>
Даже ты можешь сделать это.
ul {
display: initial;
}
Если вы используете ul в блоке div, то
// HTML file
<div class="some-class">
<ul>
<li>One</li>
</ul>
</div>
В твоей таблице стилей
.some-class ul {
list-style: none;
}
Если вы просто используете ul напрямую, без какого-либо класса или блока div:
//Style Sheet
ul {
list-style: none;
}
Чтобы полностью удалить стиль по умолчанию ul
:
list-style-type: none;
margin: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
Как упоминалось ранее, лучший способ сделать это - добавить list-style-type: none
к элементу ul. Существует большая статья о стилях пулевого я думаю, вы могли бы воспользоваться здесь.
Если вы хотите сохранить простоту, не прибегая к CSS, я просто добавлю
в моих строках кода. То есть <table></table>
.
Да, это оставляет несколько мест, но это не плохо.