Inline block not displaying

Question

I am trying to have a li element and a div be "inline", but right now the div text keeps being put right below the li element. I'm using display: inline block and jQuery as below:

$('#list').append(
   '<div class="spanish">\
      <li>'+new_task+'</li>\
      <div>Test</div>\
   </div>');


.spanish {
   display:inline-block;
}

please provide more of your code, including the rest of the HTML and CSS markup. — pretzelhammer
– pretzelhammer, Commented Sep 22, 2018 at 19:25
The only allowed parent elements for li are ul and ol. You are creating invalid HTML. You cannot have an li as a child of a div. — connexo
– connexo, Commented Sep 23, 2018 at 9:36
Following up on @connexo's comment: you cannot have an li as a child of a div, but you can have a div as a child of an li. — Ethan Ryan
– Ethan Ryan, Commented Sep 23, 2018 at 20:35
So instead of appending something like <div><li>${new_task}</li> <div>Test</div></div>, you could append something like <li>${new_task} <span>Test</span></li>. In this case, a span may be better than a div for your purposes, since a span is an inline element, whereas a div is a block element. — Ethan Ryan
– Ethan Ryan, Commented Sep 23, 2018 at 20:37

Ethan Ryan · Accepted Answer · 2018-09-23 20:30:12Z

2

As @ValeriySiestov mentioned, div is a block element, and li is a block element as well.

One way to fix your problem is to change the structure of the html you are appending, so it is a span element within the li element.

Note that list elements (i.e. uls or ols) can only have lis as their children, but lis can have anything as their children. Reference: Can I use a div inside a list item?

Assuming you have an unordered list with id #list, you can append a new list item to it like so:

var new_task = "walk the dog"

var li_string = `<li>${new_task}: <span>Test</span></li>`

 $('#list').append(li_string);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li>make bed</li>
<li>brush teeth</li>
</ul>

Note the variable new_task is being interpolated within the string of html being appended to the list using template literals.

Template literals syntax:

string text ${expression} string text

edited Sep 23, 2018 at 20:30

answered Sep 22, 2018 at 19:37

Ethan Ryan

50010 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sagar V Over a year ago

op isn't talking about appending new item to list. The problem is that the elements isn't appearing inline. fyi I'm not the down voter

connexo Over a year ago

You are not fixing the invalid HTML OP creates.

Ethan Ryan Over a year ago

@connexo added note referencing list elements only having lis as their children, including a reference link, and updated my li_string variable.

Valeriy Siestov · Accepted Answer · 2018-09-22 19:40:54Z

1

div - is a block (display: block) element by default. It stretches to 100% of parent's width li - is an item of the list (display: list-item) and also stretches to 100% of parent's width

If you want to change this behaviour, you need to add to div and li another display value, like this

.spanish div, .spanish li {
    display: inline;
}

or

.spanish div, .spanish li {
    display: inline-block;
}

In your code, you use

inslide , this is not actualy right, this is not critical, it will work, but

must be inside

answered Sep 22, 2018 at 19:40

Valeriy Siestov

712 bronze badges

Comments

sachin kumar · Accepted Answer · 2018-09-22 20:38:02Z

1

It seems from you code. You want to print div below li. There are few things to note:

Li should always come inside UL or OL tag. You current code is semantically wrong.
There can be only Li come as sibling of Li. No any other tag (You are using div)
For position use css.

Please check below answer if its helpful to you.

$( document ).ready(function() { 
var new_task = "<div class='row'>row</div>";

$('#list').append(
 '<div class="spanish">\
<ul>\
    <li>'+new_task+'<div class="sub-row">Test</div></li>\
</ul>\
 </div>');
});

.row {
 display: inline;
clear:both:
widht:100%
}
.sub-row {
display:inline;
clear:both;
margin-left:2px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list"></div>

edited Sep 22, 2018 at 20:38

answered Sep 22, 2018 at 19:40

sachin kumar

1691 gold badge1 silver badge10 bronze badges

2 Comments

heynowheynow Over a year ago

I want row and test to be on the same line, your code still puts it below

sachin kumar Over a year ago

fixed the solution. You have to just change css to display: inline on couple of places.

Collectives™ on Stack Overflow

Inline block not displaying

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related