CODEWITHSUNDEEP
html
Roshan r
Roshan r

Reputation: 522

How can I display the details in one line in HTML?

I have a script written in Python which will pass a list to a HTML file. I have a problem in displaying the elements in the html page. As per the code written below, the elements are displayed vertically down as a list. I wanted the elements to be displayed in a single line horizontally. 

<!doctype html>
<html lang="en">
<body>
<div id="content">
    {% for item in VOD1 %}
       <li>ID: {{ item[0] }}</li><li> Title: {{ item[1] }}</b></li>
       <img src="{{ item[2] }}" alt="dummy.jpg"> </img>
    {% endfor %}
    {% for item in VOD2 %}
       <li>ID: {{ item[0] }}</li><li> Title: {{ item[1] }}</li>
       <img src="{{ item[2] }}" alt="dummy.jpg"> </img>
    {% endfor %}
</div>
</body>
</html>

I tried by adding a '-' after the '%' in the for loop to trim the white spaces but don't work. If I remove the line break then assets are displayed in a line but it's in a auto fit manner.3 assets details are displayed in each line instead of the whole details in a single line. Can someone please shed some light into this?

Upvotes: 0

Views: 1182

Answers (1)

Dominik Schreiber
Dominik Schreiber

Reputation: 2771

If I get you correctly, you want the <li> elements to be displayed inline rather than as block elements:

li { display: inline-block }
<ul>
  <li>ID: 1</li>
  <li>Title: foo</li>
  <li><img src="//lorempixel.com/400/200"</li>
</ul>

Edit: as I think of it, you could also want each ID/Title as a header to the image, and every of those components horizontally aside each other. Like so:

div, li { display: inline-block }
img { display: block }
<div>
  <ul>
    <li>ID: 1</li>
    <li>Title: foo</li>
  </ul>
  <img src="//lorempixel.com/400/200">
</div>
<div>
  <ul>
    <li>ID: 2</li>
    <li>Title: bar</li>
  </ul>
  <img src="//lorempixel.com/400/300">
</div>

Upvotes: 1

Related Questions