CODEWITHSUNDEEP
javascriptjqueryhtmlcssdisplay
heynowheynow
heynowheynow

Reputation: 21

Inline block not displaying

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;
}

Upvotes: 0

Views: 296

Answers (3)

Ethan Ryan
Ethan Ryan

Reputation: 500

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

Upvotes: 2

sachin kumar
sachin kumar

Reputation: 159

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

  1. Li should always come inside UL or OL tag. You current code is semantically wrong.
  2. There can be only Li come as sibling of Li. No any other tag (You are using div)
  3. 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>

Upvotes: 1

Valeriy Siestov
Valeriy Siestov

Reputation: 81

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

    Upvotes: 1

    • Related Questions