Home/ Questions/Q 7997621
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T15:00:24+00:00

Using the css style below will display a list of anchor tag horizontally. But,

  • 0

Using the css style below will display a list of anchor tag horizontally.

But, I cannot seem to get the image and text to display veritcally in each list item. Any suggestion on how to do that.

Thank you

My solution to the problem

<html>
<head>
<style type="text/css">
li
{
display:inline;
}

table
{
display:inline;
}
</style>
</head>
<body>
<ul> 
<li>
<table>
<tr><a href="#"><img /></a></tr>
<tr><a href="#">one</a></tr>
</table>
</li> 
<li>
<table>
<tr><a href="#"><img /></a></tr>
<tr><a href="#">two</a></tr>
</table>
</li> 
<li>
<table>
<tr><a href="#"><img /></a></tr>
<tr><a href="#">three</a></tr>
</table>
</li> 
<li>
<table>
<tr><a href="#"><img /></a></tr>
<tr><a href="#">four</a></tr>
</table>
</li> 
<li>
<table>
<tr><a href="#"><img /></a></tr>
<tr><a href="#">five</a></tr>
</table>
</li>
</ul>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could add <br /> before the text, like this:

    <ul>
  <li><a href="#"><img /><br />one</a></li>
  <li><a href="#"><img /><br />two</a></li>
  <li><a href="#"><img /><br />three</a></li>
  <li><a href="#"><img /><br />four</a></li>
  <li><a href="#"><img /><br />five</a></li>
</ul>

    And change the CSS to this:

    li {
  display: inline-block;
  list-style-type: none;
}
    • 0