Я создал неупорядоченный список. Я чувствую, что пули в неупорядоченном списке назойливы, поэтому я хочу их удалить.
Возможно ли иметь список без пуль?
Вы можете удалить маркеры, установив 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>
Вам нужно использовать list-style: none;
<ul style="list-style: none;">
<li> ...</li>
</ul>
в css, style,
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>
EDIT: При необходимости используйте !important
:
<style>
ul.no-bullets li
{
list-style-type: none !important;
}
</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>
Вы можете удалить маркеры, используя style="list-style-type:none"
.
Попробуй это:
<ul style="list-style-type:none" >
<li>op1</li>
<li>op2</li>
<li>op2</li>
</ul>
Этот список заказов вертикально без точек маркера. В одной строке!
li{
display: block;
}
Вы можете удалить маркеры, используя следующий CSS:
ul {
list-style: none; //or list-style-type:none;
}
Вы даже можете добавить свой собственный стиль списка, например:
li:before {
content: '';
color:red;
}
CSS CODE
ul
{
list-style-type: none;
}
HTML CODE
<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
</ul>
То, что я пробовал и наблюдал, было
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>
<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>
Если вы хотите добиться этого только с помощью чистого 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
<dt>
и определения этого термина в <dd>
.
Ниже код - хороший и простой пример удаления пули для неупорядоченного списка
<!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>
Просто измените ваш 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>
Вы можете удалить "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>
Даже ты можешь сделать это.
ul {
display: initial;
}
Как упоминалось ранее, лучший способ сделать это - добавить list-style-type: none
к элементу ul. Существует большая статья о стилях пулевого я думаю, вы могли бы воспользоваться здесь.
Вам нужно использовать css list-style-type: none;
ul {
list-style-type: none;
}
Если вы хотите сохранить все просто, не прибегая к css, я просто помещаю
в мои строки кода.
То есть <table></table>
Да, это оставляет несколько пробелов, но это не плохо.