Why Does The List Style Disappear When Display: Block Is Added to a List Item in a List (<Ul> or <Ol>)

Why does the list style disappear when display: block is added to a list item in a list (ul or ol)?

That's because normally, display is set to list-item for <li> elements. See the W3C CSS3 specification: http://www.w3.org/TR/css3-lists/#declaring-a-list-item.

To declare a list item, the ‘display’ property should be set to ‘list-item’.

Note that you can give arbitrary HTML elements the same behaviour; set display: list-item on a <div> for example.

CSS li bullet does not show when li is inline-block

It's not the nicest way of doing it for sure. But I do recall this not really having any other conclusive outcome..

ul.columns>li:before { content:'\ffed'; margin-right:0.5em; }

EDIT: I understand the answer is already posted, but one uses absolute positioning and is less effective overall in my opinion and the other is over complicated also, not sure why relevant positioning is required on it? Plus the spacing is already sorted for you via this way. And it's only 2 attributes, simpler.

Numbers not showing with list items in ordered list with display: inline-block; and text-overflow: ellipsis;

Here is a trick solving the lost number issue

Side notes:

• A li is displayed as a list-item and when altered to inline-block the list style disappears

• CSS counters could be another approach

ol li {  float: left;  width: 200px;  margin-right: 30px;}ol li a {  display: inline-block;  vertical-align: top;  width: 100%;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}

<ol> <li><a href="One">Link One One One One One One One One</a></li> <li><a href="Two">Link Two Two Two Two Two Two Two Two</a></li> <li><a href="Three">Link Three Three Three Three Three Three</a></li> <li><a href="Four">Link Four Four Four Four Four Four Four</a></li> <li><a href="Five">Link Five Five Five Five Five Five Five Five</a></li> <li><a href="Six">Link Six Six Six Six Six Six Six Six Six Six</a></li> <li><a href="Seven">Link Seven Seven Seven Seven Seven Seven Seven</a></li> <li><a href="Eight">Link Eight Eight Eight Eight Eight Eight Eight Eight</a></li> <li><a href="Nine">Link Nine Nine Nine Nine Nine Nine Nine Nine</a></li> <li><a href="Ten">Link Ten Ten Ten Ten Ten Ten Ten Ten Ten Ten</a></li></ol>

Item (li) disappears when dragged out of List (ul) region

There are several problems with this code-

1. Your intention is moving a li list item from a valid parent container (a ul unordered list element) to an invalid parent container (a div element).

Permitted parent elements An <ul>, <ol> or <menu> element. Though not
a non-conforming usage, the obsolete <dir> may also be a parent.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

Unless there is a good reason not to make it another list, I'd suggest using a list element and simply styling it to remove the bullets to make whatever other visual/design change you require.

Invalid use of HTML will cause varying rendering between browsers, and should be avoided.

If you have to move it to the div element then I'd suggest copying the inner text or HTML from the list element and appending it to the div - possibly in a suitable block container such as a paragraph (p).

2. The overflow from your list is causing the list item to be hidden when it moves outside the confines of the list block. The jQuery UI draggable method, like most library draggable methods, uses CSS positioning (relative position in this case) to move the list item as it is dragged by the user. Once the list item is located outside of the containing list block it is hidden as per your CSS rules. Some libraries, such as Kendo UI, create a copy of the item - leaving the original in place - until it is dropped and the item is detached and moved to the new location. The same effect can be achieved in jQuery UI by setting the helper option to "clone".

This methodology would solve your overflow issue, otherwise you will need to remove the overflow: hidden style from the parent list.

3. On the drop event you are explicitly removing the dragged item. This is why it does not appear in the new place as you expect. You are removing it from the DOM (document) entirely.

Attempting to remain within the spirit of your original code, I have resolved these issues in the snippet below -

$(function() {   $( "ul, li" ).disableSelection();   $( "li" ).draggable({      helper: "clone",      revert:"invalid"   });   $( "#droppable" ).droppable({      drop: function( event, ui ) {        var dragText = ui.draggable.text();                $(event.target).append($('<p>').text(dragText));                ui.draggable.remove();                event.preventDefault();      }        });});

#droppable{ height:150px; width:750px; background:rgba(0,200,0,0.3); display:inline-block;}ul{    border: 1px solid #eee; width: 142px; min-height:20px; height:142px; list-style-type: none; margin: 0; overflow:hidden; overflow-y:scroll; padding: 5px 0 0 0; float: right; margin-right: 10px;}ul li{ color:red; border : 1px solid #eee; margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px;}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script><div id="droppable"></div><br><ul>  <li id="drag">Item1</li>  <li id="drag">Item2</li>  <li id="drag">Item3</li>  <li id="drag">Item4</li>  <li id="drag">Item5</li></ul>

Ordered list rendered as flexbox doesn't show bullets/decimals (items also rendered as flexbox)

list-style applies to elements with display: list-item only – so by making your LI display: flex, you are removing the prerequisite for list-style to have any effect.

Using a counter is probably your best bet here.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

Bullet points are not displayed

display: list-item; css property is default for <li> tag. By applying display: inline-block you're overriding it, which causes bullet points to disappear. You should use a pseudo class to solve your problem:

ul.explanations>li:before{
    content: "";
    display: list-item;
    position: absolute;
}

Bullets wont disappear from unordered list?

You have an error in your css syntax - } two times.
Also, you don't need to use html tag in your .css file

Add a tooltip to a div

For the basic tooltip, you want:

<div title="This is my tooltip">

like:

.visible {
  height: 3em;
  width: 10em;
  background: yellow;
}

<div title="This is my tooltip" class="visible"></div>

---

Related Topics